Question

我有一个本地的2个html文件，我想要做的是在第一个html中使用ajax调用来改变另一个html文件div的div的内容，但是一些函数如何警告，但div中的内容不会改变警报返回（对象对象）这是我在第一个html中使用的内容

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


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

这是我想要获取div的内容的另一个html文件

!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>

Answer 1

出于这个原因，您可以使用jQuery的.load()。

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

这里特别是你的例子。

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

如何使用ajax从另一个页面获取div内容

1 个答案: