如何从ajax成功事件返回多个值

How to return multiple values from an ajax success event

本文关键字：返回 事件 成功 ajax      更新时间：2023-09-26

我有两个js文件，即myJs1.js和myJs2.js。从myJs1.js调用myJs2.js的方法。

我想将r1和r2返回到结果中（在myJs1.js中）

我尝试过：我在ajax调用之前声明了r1和r2变量在ajax调用之后，我添加了：

return [r1,r2];

但它返回r1和r2作为undefined。当我研究这个问题时，我发现添加async: false可以工作，但它有很多问题（比如浏览器冻结）。即便如此，我还是尝试了一下，仍然无法获得r1和r2的值。

注意：我是第一次使用AJAX，所以请记住这一点。

EDIT：Js1中有一个ajax调用，在成功事件中调用该方法。我想访问结果以调用js1 中的另一个方法

编辑：在这里查找代码

myJS1:

function method() 
{
$.ajax({ 
    type: "GET",
    dataType: "json",
    url: "http://127.0.0.1:8000/***/***",
    success: function(response){
        result=methodOfmyJs2(response);
        load1(r1); //r1 from result
        load2(r2); //r2 from result
    }
})

}

myJs2：

function methodOfmyJs2(data)
{
    $.ajax({ 
    type: "GET",
    data:SomeData,
    dataType: "json",
    url: "http://127.0.0.1:8000/***/***",
    success: function(response){
      r1=anotherMethodFromThisJS1(response);
      r2=anotherMethodFromThisJS2(response); 
      result=[r1,r2]
    }
})

}

我需要访问r1和r2的值来调用myJs1的load1和load2方法。

Ajax调用默认为asynchronous，这意味着Ajax调用函数jQuery.ajax()不会等待HTTP响应返回。

为了在HTTP响应到达后获得数据，我们必须提供一个回调，即success函数。如果您想在另一个函数中获取这些数据，只需在success回调中调用该函数即可。

以下是代码：

//JS1.
function processResponse(r1, r2) {
    // do processing here with r1 and r2
}
//JS2.
function methodOfmyJs2()
{
     $.ajax({ 
        type: "GET",
        data:somedata,
        dataType: "json",
        url: "http://127.0.0.1:8000/****/****",
        success: function(response){
            r1=anotherMethodFromThisJS1(response);
            r2=anotherMethodFromThisJS2(response); 
            //calling the success callback
            processResponse(r1, r1);
        }  
    }); 
}

如果您真的想这样做，还有另一个选项，您可以像下面这样调用Ajax synchronous。

$.ajax({
    type: "GET",
    url: remote_url,
    async: false,//now call is synchronous
    success : function (data) {
    }
});

现在jQuery.ajax()将等待HTTP响应到达，然后您可以从methodOfmyJs2()返回[r1, r2]。

但是，您应该避免进行同步调用，因为这会使JS线程等待冻结UI。

您可以使用回调。

[编辑]

myJS1:

function method () {
    $.ajax({ 
        type: "GET",
        dataType: "json",
        url: "http://127.0.0.1:8000/***/***",
        success: function (response) {
            methodOfmyJS2(function (r1, r2) {
                load1(r1);
                load2(r2);
            });
        }
    });
}

myJS2:

methodOfmyJs2 (callback) {
    $.ajax({
        type: "GET",
        data: somedata,
        dataType: "json",
        url: "http://127.0.0.1:8000/****/****",
        success: function (response) {
            var r1 = anotherMethodFromThisJS1(response);
            var r2 = anotherMethodFromThisJS2(response);
            callback(r1, r2);
    });
}

$.ajax返回promise，它可以与链接

function getAjaxOutput() {
    request1().then(function(data){
      // get data from request 1 and pass to request 2
      return request2(data);        
    })
  .then(function(data){
   // get data from request2
    $('#output').text(JSON.stringify(data));
  })
    return false;
}

试试看https://jsfiddle.net/je7wf4ww/

如果你想从getAjaxOutput返回纯结果-你根本无法（当然不进行请求同步）-你需要返回promise，它是ajax调用的包装器，并用then再次将其链接起来

相关文章：