遍历数据元素作为参数发送ajax jsonp请求
来源:互联网 发布:webstorm 调试js 编辑:程序博客网 时间:2024/06/07 15:34
最近在做一个应用,获取数据库的图书显示一个列表,然后再根据isbn调用一个接口获取图书封面,因为这个接口是跨域的,所以需要发送jsonp请求,所以一开始在获取到图书的数据之后,想遍历这个数据,根据isbn作参数发送jsonp请求
for(var i=0;i<bookcaseDataList.length;i++){ var bd = bookcaseDataList[i]; $.ajax({ url:"http://xxx/api/book/isbn/"+bd.isbn+"/", type:"get", dataType:"jsonp", jsonp:"callback", success:function(data){ if(data){ alert(data.image); } }, error:function(){ alert("failed"); } }); }
测试了一下发现,bookcaseDataList有4条数据,但是后来发现发送的参数bd.isbn和获取到的data.image都是 i 为 3 最后一个元素的数据。
上网查了下知道了原因,jsonp不支持同步,是异步的( async 无效),会另外开一个线程来发送ajax,而for循环是单一线程的,所以使用for循环的时候,遇到ajax请求会先继续循环,所以导致ajax里获取到的下标i会是数据里的最后一个,导致发送的jsonp返回的数据都是最后一个元素作为参数的数据
解决办法:
使用 jquery 的 $.each
//解决:使用$.each $.each(bookcaseDataList, function(index){ $.ajax({ url:"http://xxx/api/book/isbn/"+this.isbn+"/", type:"get", dataType:"jsonp", jsonp:"callback", success:function(data){ if(data){ alert(data.image); } }, error:function(){ alert("failed"); } }); });
0 0
- 遍历数据元素作为参数发送ajax jsonp请求
- Ajax-请求参数作为XML发送
- Ajax - 请求参数作为XML发送send(xml)
- ajax(jsonp)发送ajax跨域请求
- ajax jsonp跨域请求遍历
- ajax 关于zepto.js 进行jsonp请求时无法得到data中的参数数据
- 3请求参数作为XML发送
- 3请求参数作为XML发送
- 从mysql中读出数据,并将数据作为参数发送http请求
- 【javascript】 借助script元素发送HTTP请求:JSONP原理-1
- 【javascript】 借助script元素发送HTTP请求:JSONP原理-2
- Ajax发送请求数据步骤
- Ajax用jsonp方式跨域发送请求
- jQuery Ajax 向struts2发送请求,并返回json数据,遍历json数据
- ajax 异步请求 jsonp
- ajax请求数据 参数说明
- Ajax - 发送请求参数-servlet例子
- AJAX 学习笔记(7) 发送请求参数
- 关于类型转化
- 大多数人对Redis的误解
- iOS 应用内购买(In-App Purchase)之协议、税务和银行业务
- 如何定位CPU占用过高问题
- STL源码剖析笔记-6算法(6.4 基本算法)
- 遍历数据元素作为参数发送ajax jsonp请求
- vue 2.0 常用基础知识点
- 关于httpClient系列包找不到问题
- SparseArray和ArrayMap
- linux 命令终端显示-bash-4.2#解决方法
- 安装hive
- 大白话系列之C#委托与事件讲解(一)
- 安装cuda和libfreenect2的坑
- Golang:每天零点定时执行操作