同时发送了多次ajax请求,且都是异步的,怎样拿取某一次ajax请求的返回数据。
2015-04-10 17:17
435 查看
一:需求
要实如下输入框可支持模糊查询,查询字符串:“nick”。
二:实现原理
给输入框绑定keyup事件,然后ajax请求,带输入的参数去后台数据库拿出数据再返回到页面。
三:分析
1),ajax 请求设置成同步。
performance会不好,因为是同步,所以当你输入"n" 时就会发出一次ajax请求,而且这个时候输入框不能再输入字符,必须等第一次请求结束后才能继续输入"i"。当然这个时候返回来的数据肯定是正确的。
1),ajax 请求设置成异步。就不必担心一次只能输入一个字符了,可以一次性输完。这个时候也是发出了四次ajax 请求。”n“,"ni","nic","nick"分别发了一次ajax请求。现在问题来了:如果代码是下面这样的话,就会有问题。
发现输入”nick“后查询到的结果不正确。
原因是什么呢:看下面的图片,
其实由代码可以看出,其实拿的是最后一次请求的返回数据。但是由于四次请求的时间各不相同,虽然”n“和”ni“首先被触发,但是他们用的时间都比”nic“和”nick“多,所以最后拿的数据是请求时间最多的那次ajax请求返回来的数据,也就是”ni“这个请求的数据。而我们输入的字符串是”nick“。所以会出现数据不匹配的问题。
如何解决呢??
使用如下代码的话就可以正常work了。
4000
分析:
1:此处创建了一个数组和一个index。
2:每触发一次keyup,index加1。
3:每次请求时,带着index,作为一个参数。
4,:返回传进去的index。
5,将返回数据塞进数组的第index个位置。
6,取数组最后一个位置的数据。
为什么取的数据会是正确的呢?
因为虽然”nick“是第四次触发keyup时间的,所以”i“ 是4,所以他请求时传进去的index是4,返回来的index也是4。虽然它是请求时间是最短的,但是他返回来的数据会被放到数组的第四个位置上。其实不管”nick“ 的请求时间是排第几位,因为他是第四次触发keyup事件的,所以他请求时传进去的index是4,所以他这个请求返回来的数据都会被塞到数组的第四个位置上。所以就不会出现查询出的数据不正确的问题了。
要实如下输入框可支持模糊查询,查询字符串:“nick”。
二:实现原理
给输入框绑定keyup事件,然后ajax请求,带输入的参数去后台数据库拿出数据再返回到页面。
三:分析
1),ajax 请求设置成同步。
performance会不好,因为是同步,所以当你输入"n" 时就会发出一次ajax请求,而且这个时候输入框不能再输入字符,必须等第一次请求结束后才能继续输入"i"。当然这个时候返回来的数据肯定是正确的。
1),ajax 请求设置成异步。就不必担心一次只能输入一个字符了,可以一次性输完。这个时候也是发出了四次ajax 请求。”n“,"ni","nic","nick"分别发了一次ajax请求。现在问题来了:如果代码是下面这样的话,就会有问题。
$("[name='searchkey']").keyup(function(){ var inputName = this.value; var existSelectUser = "false"; if($("#selectSCNames").find("option").length>0){ existSelectUser = "true"; } $.ajax({ url:"<%=home%>/UserDailyActionReportAction.do?operation=getMatchUser", data:{ "inputName":inputName, "existSelectUser":existSelectUser }, async:true, dataType:"JSON", type:"POST", success:function(result){ $("#showDiv").html(result.matchedUsers); } }); });
发现输入”nick“后查询到的结果不正确。
原因是什么呢:看下面的图片,
其实由代码可以看出,其实拿的是最后一次请求的返回数据。但是由于四次请求的时间各不相同,虽然”n“和”ni“首先被触发,但是他们用的时间都比”nic“和”nick“多,所以最后拿的数据是请求时间最多的那次ajax请求返回来的数据,也就是”ni“这个请求的数据。而我们输入的字符串是”nick“。所以会出现数据不匹配的问题。
如何解决呢??
使用如下代码的话就可以正常work了。
var datas = new Array(); var i = 0; $("[name='searchkey']").keyup(function(){ i++; var inputName = this.value; var existSelectUser = "false"; if($("#selectSCNames").find("option").length>0){ existSelectUser = "true"; } $.ajax({ url:"<%=home%>/UserDailyActionReportAction.do?operation=getMatchUser", data:{ "inputName":inputName, "existSelectUser":existSelectUser, "index":i }, async:true, dataType:"JSON", type:"POST", success:function(result){ var index = result.index; var ind = index-1; datas[ind] = result.matchedUsers; $("#showDiv").html(datas[i-1]); } }); });
4000
分析:
1:此处创建了一个数组和一个index。
2:每触发一次keyup,index加1。
3:每次请求时,带着index,作为一个参数。
4,:返回传进去的index。
5,将返回数据塞进数组的第index个位置。
6,取数组最后一个位置的数据。
为什么取的数据会是正确的呢?
因为虽然”nick“是第四次触发keyup时间的,所以”i“ 是4,所以他请求时传进去的index是4,返回来的index也是4。虽然它是请求时间是最短的,但是他返回来的数据会被放到数组的第四个位置上。其实不管”nick“ 的请求时间是排第几位,因为他是第四次触发keyup事件的,所以他请求时传进去的index是4,所以他这个请求返回来的数据都会被塞到数组的第四个位置上。所以就不会出现查询出的数据不正确的问题了。
相关文章推荐
- 利用jquery的ajax实现异步请求发送数据到后台
- jQuery表单 Ajax向PHP服务端发送文件请求并返回数据
- jQuery通过Ajax向PHP服务端发送请求并返回JSON数据
- jQuery通过Ajax向PHP服务端发送请求并返回JSON数据
- jquery的ajax异步请求接收返回json数据实例
- jquery的ajax异步请求接收返回json数据实例
- jquery中使用ajax发送post请求返回数据在error中
- jQuery通过Ajax向PHP服务端发送请求并返回JSON数据
- 通过ajax异步向后端发送请求,响应请求向前端传送json格式数据的实现思路
- 使用jQuery发送POST,Ajax请求返回JSON格式数据
- 使用Ajax发送Struts2请求返回JSON数据格式
- jQuery通过Ajax向PHP服务端发送请求并返回JSON数据
- Query通过Ajax向PHP服务端发送请求并返回JSON数据
- jqury+ajax每秒向后台发送请求数据然后返回页面(包括jqruy页面加载完毕才执行方法)
- IE8,9下,无法刷新页面数据,Ajax发送请求返回码304
- .net 饼状图,,, ajax异步请求数据 返回xml格式的数据
- 初涉Ajax,以post或get方法发送数据,以json或xml形式接收服务器返回的请求
- jquery的ajax异步请求接收返回json数据
- jquery+ajax每秒向后台发送请求数据然后返回页面的代码
- jQuery通过Ajax向PHP服务端发送请求并返回JSON数据