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会进行一次智能猜测＆＃34;但是明确地告诉你你可能不会受到伤害。期待html。）

.replaceWith() method完全听起来应该这样做。

编辑：我刚才注意到（正如Jon指出的那样）你使用.load()的语法，你在其中包含了一个选择器，用于返回部分返回的html，所以你可以简单地修改那个选择器获取#large_buttons div中的响应中的元素：

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

应该使用示例html，其中div只包含其他元素而不包含文本节点。

Answer 2

如果我理解正确，您希望将div#large_buttons替换为从服务器获得的新版本。 JQuery的replaceWith()方法应该可以解决问题。

Answer 3

如果您想对现有代码进行最少量的更改，那么最简单的方法是将#large_buttons包装在另一个元素中（它将是唯一的子元素）并简单地使用.load那个。

如果您没收.load并使用更多基本功能（例如$.get），则无需执行此操作，例如：

$.get(large_buttons_url, function(data) {
    $("#large_buttons").replaceWith(data);
});

...但是你失去了.load可以做的自动DOM过滤（你不能再将#large_buttons附加到URL），所以你必须确保AJAX请求只有返回您感兴趣的HTML片段。

就我个人而言，这就是我要做的事情，因为获取整个页面并丢弃除了它的一部分之外听起来并不是很好;但同样，这将要求您修改比替代方案更多的代码。

Answer 4

使用ajax将一些内容加载到任何div，您可以使用jQuery load函数

$("#large_buttons").load("url_which_Returns_html.php",function(data){
   alert("Items loaded");
});

这会将从php页面返回的内容（覆盖现有内容）加载到id为“large_buttons”的div

如果你想在一个特殊的div之后加载数据，你可以这样做

$.get("url_which_returns_html.php",function(data){
   ('#right').after(data);
});

这会将来自php页面的响应加载到id为“right”的div之后