同时发送了多次ajax请求,且都是异步的,怎样拿取某一次ajax请求的返回数据。

当输入框模糊查询时,连续触发多次异步ajax请求。由于请求时间不同,可能导致返回数据与输入不匹配。通过创建数组和index,根据keyup事件次数作为参数发送请求并存储返回数据,确保获取正确查询结果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一:需求

要实如下输入框可支持模糊查询,查询字符串:“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]);
				}
			});
		});


分析:


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,所以他这个请求返回来的数据都会被塞到数组的第四个位置上。所以就不会出现查询出的数据不正确的问题了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值