仅使用Ajax加载主体内容 - jQuery

Question

3

我希望你能够将一个网页(sample.html)的标签内的内容加载并追加到另一个网页(index.html)的标签内，这与IT技术有关。请问如何实现？很抱歉我是新手。

我使用了以下代码，但似乎不能正常工作。

$.ajax({
    url: "/site/pages/sample.html",
    success: function(data){
        $('body').append(data);
    }
});

- user1184100

4个回答

4

一个简单的方法是让jQuery过滤掉返回标记中的<body>元素，然后使用contents()获取其子元素，包括文本节点，并将它们附加到文档主体中。

$.ajax({
    url: "/site/pages/sample.html",
    success: function(data) {
        $(data).contents().appendTo("body");
    }
});

- Frédéric Hamidi

谢谢Frederic..但是$(data).find("body").contents().appendTo("body");似乎不起作用。 - user1184100

奇怪，假设您收到的标记包含<body>元素，那应该可以工作...您在浏览器的错误控制台中看到消息吗？如果是这样，请在此处发布它。 - Frédéric Hamidi

我终于明白了发生了什么：jQuery已经自动过滤了标记中的<body>元素，所以find("body")将不会匹配任何内容。我的更新答案应该可以正常工作。 - Frédéric Hamidi

嗨..那个有效了，但是一些奇怪的东西发生了，<title>我的示例页面</title>也出现在body标签中..真的很奇怪。 - user1184100

2

是的，看起来<head>元素被过滤掉了，但<title>元素没有。由于jQuery在这种情况下只匹配<body>元素，因此@ManseUK的答案是否提供更好的结果？ - Frédéric Hamidi

谢谢Frederic！Manseuk的回答起作用了，并且它只获取正文中的内容。 - user1184100

1

要么修改 sample.html 并从中删除您不需要的内容（如果您只通过 ajax 访问它），要么将 ajax 函数返回的数据视为一个长字符串，并仅复制您需要的内容。

$.ajax({
    url: "/site/pages/sample.html",
    success: function(data){
        $('body').append(parseReturnData(data));
    }
});

parseReturnData仅从实际页面返回您所需的内容。

- Andrei G

1

你可以这样做在想要显示页面的地方声明一个 div

  <div id="managePage"> </div>

将此代码添加到脚本代码中

 $('#managePage').load(pageName);

如果想要添加点击事件，可以使用onclick，否则根据您的需求选择其他方式。

- Mulesoft Developer

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Manse · Accepted Answer

尝试：

$('body').load('/site/pages/sample.html body');

.load() 方法不同于 $.get()，允许我们指定要插入的远程文档的一部分。这是通过 url 参数的特殊语法实现的。如果字符串中包含一个或多个空格字符，则假定在第一个空格之后的字符串部分是一个 jQuery 选择器，用于确定要加载的内容。

请参阅 .load() 文档中的 Loading page fragments。

更新：正如评论中 @Windkiller 指出的那样，这将在文档上复制 body 元素。更好的解决方案是使用 get 并替换 body 的内容，例如：

$.get("/site/pages/sample.html body", function(data) {
     $("body").replaceWith(data);
});