Question

我正在使用jQuery的AJAX从服务器获取新内容。数据以JSON加载：

$.ajax({
    url: url,
    data: {
        'ajax': '1',
    },
    dataType: 'json',
    success: somefunction
});

对于服务器端应用程序限制，我无法在内部设置更多JSON变量，因此我必须将所有内容加载到内容中。这就是为什么我必须将结果加载到jQuery中，而不是搜索和替换页面上的一些元素，如此（在somefunction中使用）：

var somefunction = function(data) {
    var con = $('<div></div>').html(data.content); // just $(data.content) is not working
    $('div#mainContent').html(con.find('div#ajax-content').html());
    ... // same process with three more divs
}

编辑：请注意，我必须执行相同的过程来替换三个div！

还有更多相关内容，但作为示例，我希望它足够了。我的问题：对于某种逻辑方式，我希望将结果加载到DOM（$(data.content)），解析为html（con.find('dix#ajax-content').html()）并返回DOM（$('div#mainContent').html()）在我看来就像失去一些资源和降低性能所以我想知道是否有更快的方法来直接加载DOM，如：

$('div#mainContent').dom(con.find('div#ajax-content').dom());

我试图谷歌但可能我不知道要输入什么。此外，jQuery文档对我没什么帮助。

一些事实：

jQuery 1.9.1
jQuery UI 1.10.3可用

最后，我知道用服务器端应用程序做一些事情来提供更多的JSON变量要好得多，但是，我需要写一些不那么容易的代码和平，这需要更长的时间来开发我现在没有。在客户端进行此操作暂时是临时解决方案，但是，我不想大幅降低性能。

侧面的问题：

在这种情况下使用find()函数是正确的还是有更好的函数？

编辑2（无法解析字符串） 我期待这个有效，但事实并非如此：

content = '<div id="ajax-title">Pečivo běžné, sladké, slané</div>
<div id="ajax-whereami"><a href="/category/4">Chléba a pečivo</a> » Pečivo běžné, sladké, slané</div>';
$(content);

Answer 1

我不确定这会有所帮助：

$('div#mainContent').replaceWith(con.find('div#ajax-content'))
 .attr("id","mainContent")

现在您不必设置元素的html并获取刚刚从JSON创建的Element的html。不确定这实际上是否更快但它确实跳过了2个html（）步骤。

Answer 2

实际上，$(data.content)应该可以正常运行，但您必须记住顶层元素只能通过.filter() 而不是{{1}来访问}。如果您希望定位的元素至少比根深一级，则应使用.find();在下面的示例中，您可以在适当的情况下将.find()替换为.filter()。

.find()

您也可以将选择器组合在一起：

var $con = $(data.content);
$('div#mainContent')
  .empty()
  .append($con.filter('div#ajax-content'))
  .append($con.filter('div#another-id'))
  .append($con.filter('div#and-another-id'));

最后，由于标识符只应在文档中出现一次，因此您可以删除.append($con.filter('div#ajax-content, div#another-id, div#and-another-id'));部分：

div

<强>更新

好吧，当错误的地方有新行时，似乎jQuery没有正确评估.append($con.filter('#ajax-content, #another-id, #and-another-id'));;这应该适用于所有情况：

data.content

Answer 3

你可以使用.load，虽然我认为它基本上只是同一件事的包装：

$("#mainContent").load(url + " #ajax-content", data);

您可以通过仅发送特定的ajax内容（减少下载和解析）来提高服务器端的性能，尽管这可能很困难。

除此之外，最好的办法是使用vanilla JS而不是jQuery，至少对于追加（直接使用innerHTML）。

jQuery完全用另一个DOM替换元素的DOM - 更快的方法？

3 个答案: