遍历数据元素作为参数发送ajax jsonp请求

最新推荐文章于 2022-06-07 19:41:52 发布

原创最新推荐文章于 2022-06-07 19:41:52 发布 · 740 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个关于JSONP跨域请求的问题实例，通过遍历数据集并为每本书籍发送JSONP请求来获取封面图片。文章分析了使用for循环时出现的问题，并提供了解决方案——采用$.each替代。

最近在做一个应用，获取数据库的图书显示一个列表，然后再根据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");
	    			}
	    		});
    		});