json - jQuery：如何用 JSON 响应替换内容

Question

我很难用 JSON 对象属性替换 HTML 元素的内容。这是我的代码：

url  = '/blah/blah-blah';
data = $.getJSON(url);
$(this).parent('.status').replaceWith(data.content);

现在，我知道正在返回正确的 JSON 对象，并且它包含一个格式正确的属性，称为“内容”。（我在控制台中显示它）。其次，我知道我正在选择要替换的正确元素。（如果我替换data.content为“宾果！”我会看到屏幕上显示的文本。）

然而，当我运行上面的代码时，我看到我的元素的内容被什么都替换了。我究竟做错了什么？

请注意，我尝试用替换data.content，data.responseJSON.content但这没有帮助。

谢谢！

score 4 · Accepted Answer

您需要使用回调，

  url  = '/blah/blah-blah';
  $.getJSON(url, function(data) {
    $("some selector").parent('.status').replaceWith(data.content);
  })

在您的示例中， $.getJSON 没有返回任何有意义的内容——可能只是“未定义”。同时，它提出你的要求。当 getJSON 成功时，结果被传递给一个处理函数来处理它。如果您不提供回调，则当您从服务器收到响应时不会发生任何事情。

或者如果你不想使用新的选择器，你可以保存 $(this)。

  url  = '/blah/blah-blah';
  item = $(this)
  $.getJSON(url, function(data) {
    item.parent('.status').replaceWith(data.content);
  })

score 1 · Accepted Answer

AJAX 调用是异步的，所以当你尝试使用它时，内容还没有到达。当您在控制台中显示它时，您无法以足够快的速度看到响应没有立即到达。

getJSON当数据到达时，在调用中使用回调来处理数据：

url = '/blah/blah-blah';
$.getJSON(url, function(data) {
  $(this).parent('.status').replaceWith(data.content);
});

score 1 · Accepted Answer

您的代码在.getJSON(url)调用完成之前执行。尝试像这样指定成功处理程序：

$.getJSON(url, function(data) {
    $(this).parent('.status').replaceWith(data.content);
});

3 回答 3