时间戳

首页 > 解决方案 > 执行顺序执行异步 ajax 调用的方法

jquery - 执行顺序执行异步 ajax 调用的方法

问题描述

我在客户端有一组数据，我需要将其传递给 MVC 控制器并按顺序处理。我正在使用 ajax 异步方法将数据传递给服务器。目前，两个调用并行触发，尽管我将数据一一传递给服务器。我需要让 UI 线程等待第一个请求完成。

    var data=["A","B","C"];

    $.each(data,function(item){
        setTimeout(function(){
            // Ajax async call 
        },1000);
    });

标签： jqueryajax

解决方案

嗨，这是一个使用延迟对象的jsfiddle示例，此示例的基本内容很简单，我使用 2 个单独的函数：

  1. 一个登录用户。
  2. 登录完成后，另一个将显示一些数据。

第一个调用在发送数据之前显示一个模态，一旦请求完成并且登录成功，模态消息更新并执行第二个调用，第二个调用完成后，信息将显示到模态中。

该代码是一个基本示例，并且是即时制作的，它没有失败方法或始终方法，但我留下了文档的链接，以防您想要实现这些方法：

Javascript：

const _ajaxLogin = (data)=>{
console.log(data);
return $.ajax({
    type: 'POST',
    url: '/echo/json/',
    data: {json:JSON.stringify(data),delay:1},
    beforeSend: function() {
        $('#myModal').css("display","block");
    },
    dataType: 'json'
})
}

const _ajaxInfo = (data)=>{
console.log(data);
return $.ajax({
    type: 'POST',
    url: '/echo/json/',
    data: {json:JSON.stringify(data),delay:3},
    dataType: 'json'
})
}

$('#btnLogin').on('click',(e)=>{
let username = $('#txtUsername').val(),
password = $('#txtPassword').val(),
json = {
username : username,
password : password,
response: "success"
};
var information = {status:"active",account:34566 , currency:"$", amount: 42250, last_transaction:'05/08/2019 14:25:32', name:"John", lastname:"Doe"};
_ajaxLogin(json)
.done((response)=>{
if(response.response == "success"){
$('#msgTittle').text("Loading Your Account Information");
_ajaxInfo(information)
.done((account_response)=>{
    if(account_response.status != undefined){
  $('#loading').css("display","none");
  $('#msgTittle').text("Welcome back "+account_response.name+" "+account_response.lastname);
  $("#info").text("Account:"+account_response.account+", your avaliabvle money is "+account_response.currency+account_response.amount+", your last transaction was "+account_response.last_transaction);
  $('#btnLogout').css("display","");
  } 
})
}
})//end first done
.fail((response)=>{
console.log("error:"+response);
})
});//end click


$('#btnLogout').on('click',(e)=>{
$("#info").text("");
$('#loading').css("display","block");
$('#msgTittle').text("Your login was successfull");
$('#myModal,#btnLogout').css("display","none");
});

**编辑：**如您所见，url 中有一些 echo/json 内容，这是 jsfiddle 必须模拟 ajax 调用的方式

希望能帮助到你

推荐阅读