jquery load() 和追加答案

【问题标题】：jquery load() and appendjquery load() 和追加
【发布时间】：2012-02-07 03:33:05
【问题描述】：

愚蠢的快速问题：

我有我的：

$('#result').load('ajax/test.html');

但是如果我不想将加载的内容插入#result，而是将其添加到#result 中，并保留所有先例元素，该怎么办？是否可以创建一个变量，将其加载到内容中，然后将其附加或添加到我的#result 中？我想象在其他一些场景中，我可以使用我的全新变量在将其插入 DOM 之前对其进行操作。

【问题讨论】：

标签： jquery

【解决方案1】：

你的意思是这样的？

var content;
$.get('ajax/test.html', function(data){
    content= data;
    $('#result').prepend(content);
});

这会将您加载的内容首先保存到一个变量中，然后您可以随意操作它。

【讨论】：

伟大而简单的解决方案，谢谢！

【解决方案2】：

一种快速的方法可能是：

$('#result').append($('<div>').load('ajax/test.html'));

【讨论】：

不错！但是如果我 var myData = $.load.('ajax/test.html')); ?
这个解决方案的好处是它允许“片段”：api.jquery.com/load#loading-page-fragments

【解决方案3】：

var response;
$.ajax({ type: "GET",   
     url: "ajax/test.html",   
     async: false,
     success : function(text)
     {
         response= text;
     }
});
$('#result').prepend('<div>'+response+'</div>');

您需要“async: false”，以便等待响应。如果您不等待它（正常的 Ajax 异步调用），您将有一个未知时间的未定义变量，因此可能很危险。

编辑：正如 cmets 所说，使用“async:false”并不常见，而且很丑陋。通常你会操纵响应并将其插入到成功回调中的 DOM 中。仅当您确实需要变量中的响应以等待另一件事使用该变量时才需要使用异步，而不是常见的事情发生。

$.ajax({ type: "GET",   
     url: "ajax/test.html",   
     success : function(text)
     {
         $('#result').prepend('<div>'+text+'</div>');
     }
});

【讨论】：

很高兴知道，也许 ajax(get) 会比 get() 更好？
不，$.get 是 $.ajax(get) 的缩写形式。但是在 $.get 中，您不能添加更多参数，例如“异步”参数。 $.load 也是 $.ajax(get) 的缩写形式，它在元素中加载 que 响应。 $.post() 也是如此，它是 $.ajax(type:"POST") 的缩写
同步加载是个坏主意。
示例中的#result 行末尾缺少引号，#result 周围缺少两个标记。我会编辑，但 SO 不喜欢少于 6 个字符的编辑。
同意@Ryan - 只需将.prepend() 语句放在成功回调函数中。无需同步。

【解决方案4】：

做一个 jQuery post 并将数据加载到一个变量并添加到所需的 div 之前

$.post('ajax/test.html', function(data) {
  $('#result').prepend(data);  
});

【讨论】：

一些建议 get() 或 ajax(get) 为什么 post()？
@Daniele ：两者都可以。您可以选择简单的 get()，这是最简单的 ajax 形式。如果查询字符串值很大，我会使用 post。
我更新了答案，以避免未来读者的困惑。
我需要加载一些图片，比如说总共 1mb，post() 会更好地处理这个吗？
使用get，会有url长度限制。stackoverflow.com/questions/1872965/get-vs-post-in-ajax

【解决方案5】：

我认为这是一个较短的解决方案

$.get("ajax/test.html",function (dados) { $("#result").append(dados);});

【讨论】：