如何使用 JQuery ajax() 加载 HTML 片段？答案

【问题标题】：How to load an HTML fragment with JQuery ajax()?如何使用 JQuery ajax() 加载 HTML 片段？
【发布时间】：2013-06-02 17:47:29
【问题描述】：

请有人告诉我如何使用 JQuery ajax() 方法从另一个页面上的 div 中提取内容？

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() 方法。

提前致谢。

【问题讨论】：

可能重复stackoverflow.com/questions/2398568/…

标签： jquery

【解决方案1】：

试试这个

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

也可以在这里jquery load api访问“加载页面片段”。

【讨论】：

感谢您的回复，但我确实提到我想知道如何使用完整的 ajax() 方法而不是 load() 简写。

【解决方案2】：

另一个简写是$.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加载页面（或Page Fragments）的内容可以通过

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

以不将 html 放置在页面上的方式执行此操作：

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

就使用 ajax() 而言，这似乎是不必要的，除非在微优化中，但我会研究它并回来查看

更新

ajax 方法不加载页面片段。必须发生的是，在您的完整功能中，您必须：

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

【讨论】：

这不是这里要问的。它不是加载片段，而是加载整个文档。
更改 url 部分以包含带有容器 ID 的哈希标记。我会更新以反映
使用ajax 而不是load 有一些很好的理由：例如ajax.fail() 如果出现问题，比检查 status 和 xhr 函数的 complete 参数更简单。顺便说一句，您的最终功能应该包括像$( '#existingDiv' ).after ( oContent ) 这样的东西。

【解决方案3】：

使用类似这样的“成功”函数调用 $.ajax：

function(result, textStatus, jqXHR) {
  $('#dialog').html(fragment? $(result).find(fragment).parent().html(): result);
}

'fragment' 是 jquery 选择器，在 .load() 调用中将被添加到 url，用空格分隔。如果 'fragment' 不为空，它会根据返回的内容创建一个 jquery 对象，并使用 'fragment' jquery 选择器找到所需的部分。

【讨论】：