您的位置:首页 > Web前端 > JavaScript

遍历数据元素作为参数发送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 

//解决:使用$.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");
}
});
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: