jQuery.ajax()成功回调存储数据返回

jQuery.ajax() success callback store data to return

本文关键字：存储 数据 返回 回调 成功 ajax jQuery      更新时间：2023-09-26

我现在正试图从一个项目中的PHP脚本获得一些数据。我发现搜索AJAX回调函数的所有示例都"使用"回调本身中已经存在的数据，但我想获取数据并以一种准备返回的方式存储它。

function getEle (id) {
    var element = []; 
    $.ajax({
        url: 'slides.php',
        type: 'POST',
        data: {"id": id},
        success: function(data) {
            var content = data;
            element[0] = id;
            element[1] = content;
            // if I alert(element[1]); here it will work! 

        }
    });
    alert(element[1]); // here it just won't :/ ("undefined")
    return element;
}

在我的脚本的某个地方一些函数需要getEle(ments)，但我得到的是undefined。有没有办法让我做我想做的事?或者有没有更好的办法?

一个解决方案是传递一个回调函数给getEle():

getEle(id, callback){
  $.ajax({
    /* some options, */
    success: function(){
      var content = data;
      element[0] = id;
      element[1] = content;
      callback(element);
    }
  })
}

然后传递一个函数，该函数包含元素内容时的操作代码:

getEle('myId', function(element){
  alert(element[1]);
});

这里有两件事失败了:

  • 变量范围—在AJAX回调中定义变量内容。这使得周围的代码无法访问它。你可以省略var，只写content = data，这使得它可以全局访问。
  • 异步性 -因为AJAX是异步的，回调后的脚本将在回调执行之前执行。解决这个问题的唯一方法是按预期使用回调。

看看这个

function getEle (id, callback) {
        var element = []; 
        $.ajax({
            url: 'slides.php',
            type: 'POST',
            data: {"id": id},
            success: function(data) {
                var content = data;
                element[0] = id;
                element[1] = content;
                callback(element);
            }
        });
    }
}
getEle ("someID", function(someElement) {
    alert(someElement);
});

下面是你的代码:

  • 数组"element"初始化。
  • AJAX调用使用成功回调函数进行
  • 当它在等待AJAX运行时，它会继续执行其余的代码和警报元素[1]，它还不存在
  • 成功回调运行并填充数组"element"。

你可以考虑用一个全局变量来解决这个问题:

var element = []; 
function getEle (id) {
    $.ajax({
        url: 'slides.php',
        type: 'POST',
        data: {"id": id},
        success: function(data) {
            var content = data;
            element[0] = id;      // the global "element" is set
            element[1] = content;
        }
    });
}
// element[0] will exist now, but only after the AJAX call is complete

或者，您可以将AJAX转换为同步调用:

function getEle (id) {
    var element = []; 
    $.ajax({
        async: false,   // forces synchronous call
        url: 'slides.php',
        type: 'POST',
        data: {"id": id},
        success: function(data) {
            var content = data;
            element[0] = id;
            element[1] = content;
        }
    });
    alert(element[1]); // now it is set
    return element;
}

我能看到的唯一其他选择是将所有内容都绑定在"success"回调中，您已经发现它工作得很好。

你的回调会在你的代码结束后执行一段时间。

您需要使用回调将值传递回来，就像$.ajax那样。

由于AJAX调用是异步的，因此警报最终未定义。因此，当AJAX调用等待服务器的响应时，脚本继续发出警报，此时element[1]还没有定义。

您应该将return element行放在success回调函数中。

相关文章：