使用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');

（注意起始片段选择器字符串的空格）