Question

我正在尝试从AJAX调用的成功部分中获取数据。所以我试着为此目的编写一个回调函数。我有这段代码：

  var data2;
  $(function () {
    function callback(data) {
      console.log(data);
      data2 = JSON.parse(data);
      console.log(data2);
    }

    $("myForm")
      .submit(function (event) {
        $.ajax({
          type: 'POST',
          url: "/...",
          data: "JASON",
          success: callback
        });
      });

    console.log(data2);

  });

在控制台中我按顺序看到了这个： undefined，data的内容和data2的内容。

我无法理解的是，为什么我首先得到undefined？我不应该首先考虑data的价值吗？为什么最后执行最后一个console.log？最重要的是，我从AJAX调用获取数据的方法是否正确？我还能做些什么来获取数据？感谢。

Answer 1

AJAX调用是异步的，这意味着在调用完成后，代码会在调用完成之前继续执行下一步。

因此，当进行了AJAX调用时，达到了console.log(newdata2);，我的猜测是newdata2未定义。

在som时间之后（即使时间非常短），调用将得到响应，并且将调用回调函数。

Answer 2

你拥有的JavaScript是非阻塞的。当代码由事件循环运行时，它会注销它需要的任何内容。一旦Ajax请求完成，data2将获得其新值...但到那时，您本来已经运行了最外层的console.log(data2)

 var data2;                      // no value gets assigned thus is undefined
 $(function () {

    function callback(data) {
      console.log(data);         // I get logged second
      data2 = JSON.parse(data);
      console.log(data2);        // I get logged last (now with a value, as I'm the success callback)
    }

    var frm = $("myForm");
    frm.submit(function (event) {
      $.ajax({
        type: 'post',           // post: meaning we're submitting/sending something
        url: "/...",
        dataType: "json",       // not JASON but json, (Java Script Object Notation)
        data: frm.serialize(),  // get data from the form
        success: callback
      });

     event.preventDefault();    // stop actual form submission.
    });

   console.log(data2);          // I get logged first (no value yet)

 });

Visual demo of this event loop，

看看上面的内容，使用工具可视化整个过程，希望能让事情变得更加清晰。（打开开发控制台，然后单击运行并查看魔法）

正如@MarcosPrez所提到的，你也有语法错误。 dataType应为json，除非您确实要将JASON的文字值提交给您正在呼叫的API。

要清楚，您希望在应用程序中接下来运行的代码（调用完成后），应该在回调中，而不仅仅是在Ajax调用旁边。

Answer 3

本声明：

 console.log(newdata2);

是在ajax调用之外，它是在之后。这意味着它会在通话开始后立即执行，但不会在通话结束后执行。

Answer 4

由于javascript的异步性质，这种情况正在发生。由于ajax调用是异步的，因此首先执行console.log(newdata2);（如上面的答案中的Cleared所述）。在ajax调用（async）成功时，将调用您的回调函数。

Answer 5

为请求设置普通网址。
设置响应数据类型。

$.ajax({    
    type: 'POST',
    url: "/request/",
    dataType: "text", // json etc.
    success: function (data) {
        callback(data);
    }    
});

Manual

jQuery AJAX回调函数无法按预期工作：

5 个答案: