如何使用JQuery ajax（）加載HTML片段？

請有人可以告訴我如何從另一個頁面上使用jQuery ajax（）方法從另一個頁面中提取內容？如何使用JQuery ajax（）加載HTML片段？

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); 
})

但它返回完整的頁面，而不僅僅是＃內容片段。

注意：我知道如何使用load（）函數來簡化它，但我想知道如何使用ajax（）方法實現它。

在此先感謝。

來源

2013-06-02 user1791841

可能重複http://stackoverflow.com/questions/2398568/loading-page-framents-with-jquery-ajax –

嘗試用這種

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

還行「加載頁面片段」在這裏jquery load api。

來源

2013-06-02 17:50:08

感謝你的迴應，但我確實提到我想知道如何使用完整的ajax（）方法而不是load（）速記。 – user1791841

另一個簡寫是$.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' 
});

此外，一個頁面（或頁面片段）的ID的裝載量可以通過

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

來完成，以在某種程度上的HTML不放置在頁面上做到這一點：

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

至於用ajax（），這似乎只是在微優化是不必要的，但我會考慮，並檢查回來

UPDATE

ajax方法不加載頁面片段。什麼將要發生的是，在你的完整功能，您將有：

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

來源

2013-08-07 18:56:31

這不是什麼問題。它不會加載片段，而是整個文檔。 – Clawfire

將url部分更改爲包含容器標識的哈希標記。我會更新以反映 –

使用'ajax'而不是'load'有一些很好的理由：例如如果出現問題，'ajax.fail（）'比檢查'complete'函數的'status'和'xhr'參數更簡單。順便說一句，你的最終功能應該包括象'$（'#existingDiv'）.after（oContent）'這樣的sthg。 –

如何使用JQuery ajax（）加載HTML片段？

回答

相關問題