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

Question

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

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

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

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

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

谢谢！

Answer 1

您需要使用回调，

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

在您的示例中，$ .getJSON不会返回任何有意义的内容 - 可能只是'undefined'。同时，它会提出您的要求。当getJSON成功时，结果将传递给处理函数，该函数使用它执行操作。如果您不提供回调，那么当您从服务器获得响应时，不会发生任何事情。

或如果您不想使用新选择器，可以保存$（this）。

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

Answer 2

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

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

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

Answer 3

您的代码在.getJSON(url)来电完成之前正在执行。尝试指定成功处理程序，如下所示：

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