Как получить содержимое div с другой страницы с помощью ajax

У меня есть локальные 2 html-файла, что я хочу сделать, это использовать ajax-вызов в первом html, чтобы изменить содержимое div из другого html-файла div, но некоторые из них функция оповещения, но содержание в изменении ДИВ оленья кожа также предупреждение возврата (объект объекта) вот что я использую в первом HTMLКак получить содержимое div с другой страницы с помощью ajax

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


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

здесь другой 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>

источник

2013-08-01 user1968057

От http://api.jquery.com/load/, '$ ('# результат') нагрузки ('Аякса/test.html #container.');' – jonhopkins

, что может мне нужно исправить если мне нужно придерживаться вызова ajax – user1968057

Использует ли '$ ('# fill'). html (data.html());' work? '.find ('div # text')' возвращает объект jQuery, поэтому я думаю, что вам действительно нужно извлечь html из него, прежде чем назначать его #fill – jonhopkins

Вы можете использовать jQuery's .load() именно по этой причине.

$('#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

да, я знаю, что это можно сделать легко, но мой профессор смотрит для вызова ajax. – user1968057

Это использование ajax. Однако, если вы хотите придерживаться своего кода, вы, вероятно, захотите сделать '$ (data) .contents(). Find ('div # test')'. –

Собственно, просто измените свой код с '$ (data) .find ('div # test');' to '$ (data) .filter ('div # test');' –

Как получить содержимое div с другой страницы с помощью ajax

ответ

Смежные вопросы