javascript - 使用 $.load 替换 div 中的 HTML

Question

我正在运行 jQuery ajax 方法，成功后(.done)，我想加载一些 HTML，以便用户在他们的个人资料中获得一些更新的数据。

我试图替换的 HTML 看起来像这样，

<div id="large_buttons"><a href="">Button</a><a href="">Button 2</a></div>

为此，我正在执行以下操作，

$("#large_buttons").load(site_url+"my_profile #large_buttons");

但是这只会创建以下 HTML，

<div id="large_buttons"><div id="large_buttons"><a href="">Button</a><a href="">Button 2</a></div></div>

我想要的是加载新的 HTML 并完全覆盖现有的 #large_buttons div

这可能吗？

Answer 1

.load() method (如您所见)将响应直接加载到指定的元素中，因此一种解决方案是将服务器端代码更改为仅输出不带 #large_buttons div 本身的内容。

另一种解决方案是使用其他 Ajax methods 之一，例如 .get() method ，并将返回的 html 准确放置在成功处理程序中您想要的位置:

$.get(site_url+"my_profile", function(data) {
    $("#large_buttons").replaceWith(data);
},'html');

(理论上，您不需要最后一个参数来指示数据类型，因为 jQuery 会进行“智能猜测”，但明确告诉它您正在期待 html 也没什么坏处。)

.replaceWith() method完全按照听起来应该做的那样进行。

编辑:我刚刚注意到(正如 Jon 指出的那样)您使用的是 .load() 语法，其中包含一个选择器来选择要使用返回的 html 的哪一部分，因此您可以简单地修改该选择器以获取 #large_buttons div 内响应中的元素:

$("#large_buttons").load(site_url+"my_profile #large_buttons > *");

应该与您的示例 html 一起使用，其中 div 仅包含其他元素而不包含文本节点。