2013-06-02 3 views
7

Пожалуйста, кто-нибудь скажет мне, как извлечь содержимое из div на другой странице, используя метод ajax() JQuery ?Как загрузить фрагмент HTML с помощью JQuery ajax()?

anotherpage.html

<html> 
<head></head> 
<body> 
<div id="content">I want to extract this element</div> 
</body> 
</html> 

Я пробовал:

$.ajax({ 
url: "anotherpage.html #content", 
dataType: "html" 
}).done(function(data){ 
$("#results").html(data); 
}) 

Но он возвращает полную страницу, а не только фрагмент #content.

ПРИМЕЧАНИЕ. Я знаю, как заставить его работать с сокращением load(), но я хотел бы знать, как это сделать с помощью метода ajax().

Заранее благодарен.

+1

можно дублировать http://stackoverflow.com/questions/2398568/loading-page-framents-with-jquery-ajax –

ответ

2

попробовать с этим

$('#results').load("anotherpage.html #content"); 

также посетить "Загрузка страницы Фрагменты" здесь jquery load api.

+0

Спасибо за ваш ответ, но я упомянул, что хотел знать, как это сделать с помощью полного метода ajax(), а не сокращения load(). – user1791841

0

Еще одна стенограмма - $.get function, и пример, соответствующий вашему запросу, - here. Эта документация также дает расширенную форму метода вместо сокращения.

var jqxhr = $.get("example.html", function() { 
    alert("success"); 
}) 
.done(function() { /* Do work.. */ }) 
.fail(function() { /* Do error.. */}) 

// which can be simplified to 


$.ajax({ 
    url: "example.html", 
    data: { /*data*/ }, 
    success: function(oData) { /* Do work.. */ }, 
    dataType: 'html' 
}); 

Кроме того, загрузка содержимого страницы (или страницы фрагментов) с помощью идентификатора может быть достигнуто путем

$("#TargetContainer").load("example.html #Content"); 

Чтобы сделать это таким образом, что HTML не размещается на странице:

$('<div>').load("example.html #Content"); 

Что касается использования Ajax(), это кажется ненужным, за исключением микро-оптимизации, но я буду смотреть в него и проверьте в

ОБНОВЛЕНИЕ

Метод ajax не загружает фрагменты страницы. Что будет происходить в том, что в вашей полной функции вы должны:

function(oData) 
{ 
    var oContent = $(oData).find('#selector"); 
} 
+0

Это не то, что здесь задают. Это не загрузка фрагмента, а всего документа. – Clawfire

+0

Измените часть URL, чтобы включить хэш-тег с идентификатором контейнера. Я буду обновлять, чтобы отразить –

+0

. Есть несколько веских причин для использования 'ajax', а не' load': например. 'ajax.fail()', если что-то пойдет не так, менее сложно, чем проверять параметры 'status' и' xhr' функции 'complete'. Кстати, ваша конечная функция должна включать sthg, например '$ ('#existingDiv') .after (oContent)'. –

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