ajax如何循环lis,关于js中循环遍历中顺序执行多个嵌套ajax的问题

最新推荐文章于 2024-04-27 02:12:02 发布

weixin_39845306

最新推荐文章于 2024-04-27 02:12:02 发布

阅读量338

点赞数

文章标签： ajax如何循环lis

就是业务上需要完成一个功能，这个功能需要依次调用四个接口，后面接口的参数都依赖于前一个接口的返回值。

类似这样：

var objArr = "从其他逻辑获得";

for(var n in objArr){

$.ajax({

type : 'post',

url : '../xxx/xxxx',

data : {param:objArr[n].xxx},

async : false,

secureuri : false,

contentType : "application/json;charset=utf-8",

dataType : 'JSON',

success : function(data) {

$.ajax({

type : 'post',

url : '../xxx/xxxx',

data : {param:data.xxx},

async : false,

secureuri : false,

contentType : "application/json;charset=utf-8",

dataType : 'JSON',

success : function(data1) {

$.ajax({

type : 'post',

url : '../xxx/xxxx',

data : {param:data1.xxx},

async : false,

secureuri : false,

contentType : "application/json;charset=utf-8",

dataType : 'JSON',

success : function(data2) {

$.ajax({

type : 'post',

url : '../xxx/xxxx',

data : {param:data2.xxx},

async : false,

secureuri : false,

contentType : "application/json;charset=utf-8",

dataType : 'JSON',

success : function(data3) {

if(n = data3.length){

alert("全部完成");

}

});

}

});

}

});

}

});

}

但是事实不与愿为，因为什么呢？这个js里的循环，每次都是自顾自的走，它不等ajax执行好走完到success代码，就继续循环下一条数据了，这样数据就全乱了。

后来，想到试试ajax里async这个属性，async默认是true，即为异步方式，那我改为false同步行不行呢？答案是也是不行，阻塞在那了。

然后把每一个ajax都写一个方法，调相应的方法，测试也是无效。

最后搞半天换了个思路，不是从技术上解决的，这个问题的关键是循环数据的时候，ajax的数据是依赖等待返回的，只要涉及到遍历循环，那这个问题就肯定存在。

那能不能避开循环呢？想到一个方法，这四个ajax分别写四个方法，这四个方法都有固定的两个参数，一个是我们要使用的数据objArr，一个是一个计数器num，这样

var objArr = "从其他逻辑获得";

for(var n in objArr){

xxxA(objArr,0);

}

function xxxA(objArr, num){

$.ajax({

type : 'post',

url : '../xxx/xxxx',

data : {param:objArr[num].xxx},

async : false,

secureuri : false,

contentType : "application/json;charset=utf-8",

dataType : 'JSON',

success : function(data) {

xxxB(objArr, num, data);

}

});

}

function xxxB(objArr, num, back){

$.ajax({

type : 'post',

url : '../xxx/xxxx',

data : {param:back.xxx},

async : false,

secureuri : false,

contentType : "application/json;charset=utf-8",

dataType : 'JSON',

success : function(data1) {

xxxC(objArr, num, data1);

}

});

}

function xxxC(objArr, num, back){

$.ajax({

type : 'post',

url : '../xxx/xxxx',

data : {param:back.xxx},

async : false,

secureuri : false,

contentType : "application/json;charset=utf-8",

dataType : 'JSON',

success : function(data2) {

xxxC(objArr, num, data2);

}

});

}

function xxxD(objArr, num, back){

$.ajax({

type : 'post',

url : '../xxx/xxxx',

data : {param:back.xxx},

async : false,

secureuri : false,

contentType : "application/json;charset=utf-8",

dataType : 'JSON',

success : function(data3) {

if(num = arrObj.length-1){

69 alert("全部完成");

70 }else{

71 xxxA(objArr,num+1);

72 }

}

});

}

它的大致思路是分为四个方法，每个方法都有两个参数，一个要遍历的数据，一个计数器，BCD三个方法还有个参数，就是上一个方法返回的数据，先调A，A里面再调B，B里面再调C，C里面再调D，D里面判断一下，如果num = arrObj.length-1就代表全部走完，没有就继续再调A，依次循环。

关于js中循环遍历中顺序执行ajax的问题(vue)

js里的循环,每次都是自顾自的走,它不等ajax执行好走完到success代码,就继续循环下一条数据了,这样数据就全乱了. 后来,想到试试ajax里async这个属性,async默认是true,即为异 ...

Java循环遍历中直接修改遍历对象

Java 循环遍历中直接修改遍历对象如下,会报异常: for (ShopBaseInfo sp: sourceList) { if(sp.getId()==5){ sourceList.remove( ...

JAVA中循环遍历list有三种方式

转自:https://blog.csdn.net/changjizhi1212/article/details/81036509JAVA中循环遍历list有三种方式for循环.增强for循环(也就是常 ...

js 各种循环遍历

js 各种循环遍历(表格比较) 遍历方法能否遍历数组能否遍历对象备注 for 能不能 for in 能(有诸多缺点) 能为遍历对象而设计的,不适用于遍历数组 forEach 能不能 bre ...

js并行加载，顺序执行

js并行加载,顺序执行运行脚本或加载外部文件时,会阻塞页面渲染,阻塞其他资源的加载.如果页面中需要加载多个js文件,在古老浏览器中性能会比较糟糕. 因此有了最原始的优化原 ...

jquery each循环遍历完再执行的方法因为each是异步的所以要加计数器&period;

query each循环遍历完再执行的方法因为each是异步的所以要加计数器.var eachcount=0;$(“.emptytip”).each(function(){ eachcount++c ...

jquery each循环遍历完再执行的方法

jquery each循环遍历完再执行的方法因为each是异步的所以要加计数器. var eachcount=0;

 $(".emptytip").eac ...

Python的list循环遍历中，删除数据的正确方法

在遍历list,删除符合条件的数据时,总是报异常,代码如下: num_list = [1, 2, 3, 4, 5] print(num_list) for i in range(len(num_lis ...

随机推荐

jQuery之&dollar;(document)&period;ready()使用介绍

学习jQuery的第一件事是:如果你想要一个事件运行在你的页面上,你必须在$(document).ready()里调用这个事件学习jQuery的第一件事是:如果你想要一个事件运行在你的页面上,你必须 ...

【WCF--初入江湖】01 WCF编程概述

01 WCF编程概述 SOA的优点 1.服务独立于平台和工作环境.服务并不关心自己所处的环境,也不关心与之进行通信的服务所处的环境. 2.服务相互隔离. 3.服务对协议.格式和传输中立. 4. ...

ES6学习笔记(二)

1.数组的解构赋值基本用法 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. var a = 1; va ...

MYSQL 退出的三个方式

方式1: exit 方式2: quit 方式3: \q

七、cocos2dx之粒子系统

本文由qinning199原创,转载请注明:http://www.cocos2dx.net/?p=66 一.介绍粒子系统指的是一个使用大量很小的精灵或者其他的一些绘制对象模拟一些模糊效果.使用传统的 ...

MySQL 字符串连接CONCAT()函数

MySQL字符串连接函数使用方法:CONCAT(str1,str2,-) 返回结果为连接参数产生的字符串.如有任何一个参数为NULL ,则返回值为 NULL. 注意:如果所有参数均为非二进制字符串, ...

python读写文件\r\n问题

newline controls how universal newlines mode works (it only applies to text mode). It can be None, ' ...

解决pycharm启动慢

xms -xmx相关参数设置打开pycharm的安装目录 D:\PyCharm\PyCharm 2018.2.3\bin下文件pycharm.exe.vmoptions修改默认(版本2016.2)的 ...

10&period;4 再探迭代器-插入/IO/反向

10.4.1 插入迭代器插入迭代器接受一个容器,生成一个迭代器,通过向该迭代器赋值可以实现向容器添加元素 (1)back_inserter: 接受一个参数, 示例: auto iter = back ...

第一章 HTML+CSS(上)

HTML 网页的组成 HTML简介 HTML的语法 HTML的常用标签 HTML中的表格和表单 CSS的简单应用我们这里使用WebStorm开发工具配置浏览器常用插件: CodeGlance 代 ...

weixin_39845306

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax如何循环lis,关于js中循环遍历中顺序执行多个嵌套ajax的问题

就是业务上需要完成一个功能，这个功能需要依次调用四个接口，后面接口的参数都依赖于前一个接口的返回值。类似这样：var objArr = "从其他逻辑获得";for(var n in objArr){$.ajax({type : 'post',url : '../xxx/xxxx',data : {param:objArr[n].xxx},async : false,secureuri : fals...
复制链接

扫一扫