遍历数据元素作为参数发送ajax jsonp请求
2017-04-01 09:45
435 查看
最近在做一个应用,获取数据库的图书显示一个列表,然后再根据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
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"); } }); });
相关文章推荐
- Ajax-请求参数作为XML发送
- 从jsp页面发送ajax请求,servlet接受参数并返回json数据
- Ajax - 请求参数作为XML发送send(xml)
- 关于AJAX请求后台数据,接收后台返回的JSON数据,以及前台遍历json数据和append追加元素。
- JQuery发送ajax请求不能用数组作为参数
- Ajax-请求参数作为XML发送
- ajax请求当发送post方式application/json格式数据,url后面又带有参数的时候
- ajax 关于zepto.js 进行jsonp请求时无法得到data中的参数数据
- jQuery发送含有数组参数的ajax请求以及后台Struts2的OGNL解析错误
- jquery发送ajax请求,以及struts2的action响应请求并传回json数据的做法
- AJAX数据传输之请求与发送
- Ajax核心XMLHttpRequest对象、(发送请求、接收)方法和属性介绍、AJAX开发框架、数据格式提要(XML、JSON、HTML)
- php学习笔记(三十)ajax请求和接收参数的实现方式(包括json数据格式的简单处理)
- jQuery通过Ajax向PHP服务端发送请求并返回JSON数据
- jQuery发送ajax请求,IE有缓存,数据不更新问题
- Ajax - 发送请求参数-servlet例子
- 如何使用Ajax(XMLHttpRequest)发送带参数的请求,以及如何在Servlet中获取请求中的参数
- AJAX 跨域请求 - JSONP获取JSON数据
- 利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService,返回json数据
- (转)AJAX 跨域请求 - JSONP获取JSON数据