使用ajax加載特定的div內容

Question

我正在使用 $.ajax 加載頁面內容。 作為響應，我將整個 html 文檔作為字符串獲取，但我想通過使用 div 的 id 從響應中獲取唯一特定的 div 內容。 我無法更改響應，也無法使用 $.load 方法。 提前致謝。

$.ajax({ 
    url: ajax_url, 
    type: "GET", 
    dataType: "html" 
}).done(function(data) {
}).fail(function(jqXHR, textStatus, errorThrown) { 
});

Answer 1

在您的.done()方法中：

.done(function(data) { 
    $('#target').html($(data).find('#specificDivId'))
})

Answer 2

您可以以與當前頁面DOM相同的方式遍歷從請求返回的HTML。 嘗試這個：

$.ajax({ 
    url: ajax_url, 
    type: "GET", 
    dataType: "html" 
}).done(function(html) {
    var $divToFind = $(html).find('#myDiv');
    $divToFind.appendTo('#targetElement');
}).fail(function(jqXHR, textStatus, errorThrown) { 
    // handle the error...
});

另外，您可以使用具有內置此功能的load()方法：

$('#targetElement').load(ajax_url + ' #myDiv');

Answer 3

您可以使用DOM解析器。

$.ajax().success(function(data) {

  var parser = new DOMParser();
  var doc = parser.parseFromString(data, "application/xml");

  // doc is a DOM now

});

更多信息：

https://developer.mozilla.org/es/docs/Web/API/DOMParser

Answer 4

當AJAX返回純文本時，您可以將其轉換為jQuery DOM元素，對其進行修改並將其追加（或替換HTML）到HTML中。

例如，這樣：

$.ajax({ 
    url: ajax_url, 
    type : "GET", 
    dataType : "html" 
}).done(function(data) { 
    var obj = $(data);
    $("#yourdiv").html(obj.find(".something").html());
}).fail(function(jqXHR, textStatus, errorThrown) { 

});

我使用了.find(".something")因為我不知道接收到的消息的格式。 您可以使用任何jQuery方法。

Answer 5

您基本上想要的是使用page frament的ajax速記方法load（）在做什么：

$('#divToAddContent').load(ajax_url + ' #divToGetContent');

（注意起始片段選擇器字符串的空格）