如何從另一個頁面使用ajax獲取div內容

我有一個本地的2個html文件，我想要做的就是在第一個html中使用ajax調用來從另一個html文件div更改div的內容，但是有些如何功能警報，但在div並沒有改變也警告回報（Object對象）的內容以下是我在第一個HTML如何從另一個頁面使用ajax獲取div內容

function loadQuiz(){ 
     $.ajax({ 
      url: 'loadQuiz.html', 
      success: function(data) { 
          data=$(data).find('div#test'); 
       $('#fill').html(data); 
       alert(data); 
      } 
      }); 


<span id="fill"> 
     </span>

這裏是我想要得到的內容的其他HTML文件中使用的div

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <link rel="stylesheet" href="css/styling.css" /> 
    <link rel="stylesheet" href="css/colors.css" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script src="jquery.sortable.js"></script> 
    </head> 
    <body> 
<div id="bar"> 
<li class="disabled"><span id="noQuestions"><a href="#top" class"toplink"=""> 
Top</a></span> </li> 
<!-- <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li id="quest-header"><a href="#top"> Top</a></li> <li id="quest1"><a href="#Question1Edit"><i id="q1" class="icon-remove"></i> Question 1</a></li> <li id="quest2"><a href="#Question2Edit"><i id="q2" class="icon-remove"></i> Question 2</a></li> <li id="quest3"><a href="#Question3Edit"><i id="q3" class="icon-remove"></i> Question 3</a></li> <li id="quest4"><a href="#Question4Edit"><i id="q4" class="icon-remove"></i> Question 4</a></li> <li id="quest5"><a href="#Question5Edit"><i id="q5" class="icon-remove"></i> Question 5</a></li> --> 
<li id="nav1" draggable="true"> Question 1</li><li id="nav2" draggable="true"> Question 2</li><li id="nav3" draggable="true"> Question 3</li> 
</div> 

<div id="test"> 
    <div class="editBar" id="Question1Edit"><img class="trash" src="images/trashcan_closed.png" onmouseover="this.src='images/trashcan_open.png'" onmouseout="this.src='images/trashcan_closed.png'" alt="Trash" onclick="deleteQuestion(1)"> 
    <img class="edit" src="images/edit.png" onclick="editQuestion(1)" alt="edit"> 1. True or False: loaded question 1 (7 Points) <br><br><div class="answerField"><div class="answerField"><input type="radio" name="Answer1Value" value="True" checked="checked"> True<br><input type="radio" name="Answer1Value" value="False"> False<br></div></div></div><br><div class="editBar" id="Question2Edit"><img class="trash" src="images/trashcan_closed.png" onmouseover="this.src='images/trashcan_open.png'" onmouseout="this.src='images/trashcan_closed.png'" alt="Trash" onclick="deleteQuestion(2)"> <img class="edit" src="images/edit.png" onclick="editQuestion(2)" alt="edit"> 2. Multiple Choice: loaded question 2 (6 Points) <br><br><div class="answerField"><div class="answerField"><input type="checkbox" name="Answer2Value" value="Answer1"> a <br><input type="checkbox" name="Answer2Value" value="Answer2" checked="checked"> b <br><input type="checkbox" name="Answer2Value" value="Answer3"> c <br></div></div><br><div class="editBar" id="Question3Edit"><img class="trash" src="images/trashcan_closed.png" onmouseover="this.src='images/trashcan_open.png'" onmouseout="this.src='images/trashcan_closed.png'" alt="Trash" onclick="deleteQuestion(3)"> <img class="edit" src="images/edit.png" onclick="editQuestion(3)" alt="edit"> 3. Fill After: loaded question 3 (6 Points) <br><br><div class="answerField"><textarea name="Answer3Value" cols="40" rows="5">annswer</textarea></div></div><br></div> 
</div> 
    </body> 
</html>

來源

2013-08-01 user1968057

從http://api.jquery.com/load/，'$（ '＃結果'）負載（ 'AJAX/test.html中的#container'）;' – jonhopkins

我能有什麼需要修復如果我需要堅持ajax調用 – user1968057

'$（'＃fill'）。html（data.html（））;'工作嗎？ '.find（'div＃text'）'返回一個jQuery對象，所以我認爲你必須在將它分配給#fill – jonhopkins

您可以使用jQuery的就是這個原因。

$('#another-page-div-loads-here').load('another-page.html #some-div-on-other-page');

這裏特別針對你的例子。

$('#fill').load('loadQuiz.html #test');

來源

2013-08-01 00:35:51

之前解壓html。是的，我知道這可以做得簡單，但我的教授正在尋找爲ajax調用。 – user1968057

這是使用ajax。然而，如果你想堅持你的代碼，你可能想要做'$（data）.contents（）。find（'div＃test'）'。 –

其實，只要將你的代碼從$（data）.find（'div＃test'）;'改成'$（data）.filter（'div＃test'）;'' –

如何從另一個頁面使用ajax獲取div內容

回答

相關問題