jQuery ajax 调用返回特定的 HTML 元素

Question

我尝试了这段代码：

$.post('/script', function(result) {
    var foo = $(result).find('#foo');
    $('#result').html(foo);
});

这是返回 html：

<div id='foo'>
  Content.
</div>
<div id='new'>
   New data
</div>

在警告变量 foo 后，它返回一个对象。然后html就变成空的了。我想打印一个特定的 html 块（仅#foo 而不是#new）。

来自 jQuery 文档：

$.post( url, { s: term } ,
      function( data ) {
          var content = $( data ).find( '#content' );
          $( "#result" ).html( content );
      }
);

这个（var content）也会导致对象并在 #result 上打印一个空字符串。

Answer 1

发生这种情况是因为 #foo 和 #new 都位于顶层。

.find() 方法查找后代。因此您需要将它们包装在服务器端（结果）或 jQuery 级别的另一个 div 中。

将 html 更改为

<div>
   <div id='foo'>
     Content.
   </div>
   <div id='new'>
      New data
   </div>
</div>

因此，要么在 jquery 级别

$.post('/script', function(result) {
    var foo = $(result).wrapAll('<div>').parent().find('#foo');
    $('#result').html(foo);
});

或 如果您使用 HTML 解决方案，则可以使用可以加载页面片段的 .load 方法

$('#result').load('/script #foo');

这将加载 id < 的元素code>foo 从 /script 页面并将其放入 #result 元素中。

Answer 2

foo 是一个对象... foo.html() 是你想要的，所以你必须改变：
$('#result').html(foo);
在
$('#result').html(foo.html());