`
zhouchaofei2010
  • 浏览: 1104293 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jquery ajax异步获取数据,防止重复获取

 
阅读更多

一个onclick事件,当发送一个ajax请求时,如果该请求没有返回,则不进行 下一次的请求。该问题的处理非常类似多线程中对资源共享共享的处理。下面代码中 isSended 标志类似多线程中的锁

 

代码取自jxwpgsh 中站内搜索中查询单位的结果列表页面

 

 

var isSended=false;//类似多线程中的锁
function getProject(obj,company){
	var name = encodeURI(encodeURI(company));
	var dataTable=$(obj).next().next();
	$(dataTable).empty();
	if($(dataTable).css("display")!="block"){
	     var loadingstr = "<tr class=\"loading\"><td>Loading...</td></tr>";
	     $(dataTable).append(loadingstr);
	     $(dataTable).css("display","block");
        if(isSended==false){
          getProjectAjax(name,dataTable);
        }
	
	}else{
		$(dataTable).css("display","none");
		$(dataTable).fadeOut(2000);
	}
}

function getProjectAjax(name,dataTable){
         isSended=true;
         var now=new Date().getTime();//加个时间戳表示每次是新的请求
	     $.ajax({
			 type: "POST",
			 url: "companyProject.action?companyName="+name+"&now="+now+"",
			 async: true,
			 dataType: "json",
			 success: function(data){
				//alert($(data.listCompanyProject).length);
				//alert($(data.listCompanyProject)[0].projectName);
				$(dataTable).append("<tr class=\"cen\"><th>项目名称</th><th>项目年度</th><th>项目类型</th><th>申报资金</th><th>核定资金</th><th>拨付资金</th> <th>来源</th></tr>");
				for(i=0;i<$(data.listCompanyProject).length;i++){
					var trs = "<tr  style=\"cursor:pointer;\" onclick=\"subButton('listform','"+$(data.listCompanyProject)[i].url+"')\">";
					trs+="<td align='left'>"+$(data.listCompanyProject)[i].projectName+"&nbsp;"+"</td>";
					trs+="<td>"+($(data.listCompanyProject)[i].projectYear==null?"":$(data.listCompanyProject)[i].projectYear)+"&nbsp;"+"</td>";
					trs+="<td>"+($(data.listCompanyProject)[i].projectType==null?"":$(data.listCompanyProject)[i].projectType)+"&nbsp;"+"</td>";
					trs+="<td>"+($(data.listCompanyProject)[i].projectFund==null?"":$(data.listCompanyProject)[i].projectFund)+"&nbsp;"+"</td>";
					trs+="<td>"+($(data.listCompanyProject)[i].vouchFund==null?"":$(data.listCompanyProject)[i].vouchFund)+"&nbsp;"+"</td>";
					trs+="<td>"+($(data.listCompanyProject)[i].appFund==null?"":$(data.listCompanyProject)[i].appFund)+"&nbsp;"+"</td>";
					trs+="<td width='8%'>"+$(data.listCompanyProject)[i].fundSource+"&nbsp;"+"</td>";
					trs+="</tr>";
					$(dataTable).append(trs);
			   }
			   $(dataTable).find(".loading").remove();
			    isSended=false;
			 },
			       
			 error: function(XMLHttpRequest, textStatus, errorThrown) {
			    isSended=false;
			    alert("请求失败!");
			 }
		});
}

 

分享到:
评论

相关推荐

    jquery-ajax最简单的实力

    3. **异步处理**:理解异步请求的特性,防止在请求未完成时触发多次请求,导致数据混乱。 4. **前后端分离**:在实际项目中,数据通常由后端动态生成,而非静态XML文件。了解如何与后端API配合是重要的。 通过这个...

    HTML5 异步上拉加载Jquery ajax

    HTML5异步上拉加载(Pull-to-Load)是一种常见的网页滚动加载更多内容的技术,它在用户滚动到页面底部时自动触发,通过JQuery AJAX实现数据的动态获取和页面更新。这种技术通常用于社交媒体、新闻网站或者有大量列表...

    jQuery zTree 异步加载添加子节点重复问题

    其特点是拥有优异的性能,灵活的配置选项,支持多种功能的组合,包括但不限于延迟加载技术、跨浏览器兼容性、对JSON数据的支持、静态和Ajax异步加载节点数据的能力以及支持自定义皮肤和图标。此外,它还提供灵活的...

    ajax jquery 自动增加行

    在实际应用中,你可能还需要处理更多的细节,例如验证用户输入、防止重复添加、处理服务器返回的错误状态等。同时,为了提高用户体验,可以添加加载指示器和动画效果,使得用户明确感知到操作的进度。 以上就是使用...

    JQUERY EASYUI 异步树

    还可以设置 `loader` 函数来自定义加载逻辑,如缓存已加载过的节点,防止重复请求。 8. **状态管理**:在异步树中,可以使用 `expandIcon` 和 `leafIcon` 来区分节点的展开状态和叶子节点,同时 `loaded` 属性可以...

    Jquery各种插件和JQuery Ajax三级联动地区下拉框 & 非Ajax实现三级联动

    在我们的场景中,当用户在省份下拉框中选择一个省份时,我们可以通过AJAX异步请求服务器,获取对应省份的城市列表,然后动态填充城市下拉框;同理,当用户选择城市后,再获取区县列表。 **三、实现步骤** 1. **HTML...

    利用 Linq+Jquery+Ajax 实现异步分页功能可简化带宽压力

    【知识点详解】 ...综上所述,利用Linq进行数据查询,jQuery处理前端事件和DOM操作,Ajax实现异步通信,配合JSON进行数据传输,可以有效地实现一个高性能的异步分页功能,同时减轻服务器带宽压力,提升用户体验。

    ASP.NET+jquery实现AJAX滚动滚动条加载数据的下拉列表控件

    4. **AJAX请求**:在触发函数中,使用jQuery的`.ajax()`方法向服务器发送请求,获取更多数据。参数包括URL、请求类型(GET或POST)、数据(如果需要的话)以及回调函数。 5. **服务器端处理**:在ASP.NET的后端,...

    ajax异步投票

    GET用于获取数据,而POST用于提交数据。服务器返回的数据可以是XML、JSON、HTML等格式,通过XMLHttpRequest的responseText或responseXML属性获取。 3. **事件监听**:XMLHttpRequest对象上有多个事件,如...

    JQUERY插件--ajax搜索

    它通过 JavaScript 发送异步请求到服务器,获取数据后在客户端进行处理,无需刷新页面,提供了无缝的数据交互体验。 ### 二、jQuery 与 Ajax jQuery 对原生 JavaScript 的 Ajax API 进行了封装,使得使用更加简洁...

    jquery做的星级评分可以利用AJAX来操作

    在实际项目中,还需要考虑其他因素,如防止重复提交、用户未登录时的处理、以及兼容不同浏览器的AJAX实现。此外,为了提供更好的用户体验,可以使用加载指示器显示请求正在处理,以及使用适当的缓存策略来减少不必要...

    JQuery+ajax实现批量上传图片

    通过禁用所有相关按钮防止重复操作,并使用`setTimeout()`函数引入延时,确保图片按顺序上传。 - **异步上传函数**:`TajaxFileUpload()`函数负责实际的Ajax请求发送,通过循环判断条件`if(Tnum)`,逐个处理上传...

    jQuery+Ajax+PHP无刷新分页

    jQuery封装了Ajax功能,我们可以通过`.ajax()`或`.load()`等方法进行异步请求。例如,使用`.ajax()`实现分页请求: ```javascript $.ajax({ url: 'server_page.php', type: 'POST', data: {page: currentPage}...

    Ajax和jQuery学习笔记

    Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)是一种用来创建快速动态网页的技术,通过在后台与服务器进行少量数据交换,使得网页能够实现局部刷新。也就是说,它可以动态加载数据并更新网页的部分...

    ajax异步上传图片例子

    - 存储图片:将接收到的二进制数据保存到服务器的某个目录,通常会包含一些安全和性能考虑,比如重命名文件、防止重复文件名、设置权限等。 - 返回响应:可以返回图片的存储路径、ID或其他相关信息,前端可以根据...

    解决jquery的ajax调取后端数据成功却渲染失败的问题

    在前端开发过程中,jQuery 的 AJAX 功能经常被用于与后端服务器进行异步通信,获取并更新页面数据。然而,有时候我们可能会遇到一种情况:AJAX 请求成功地从后端获取了数据,但在尝试将这些数据渲染到页面时却遭遇...

    jquery模拟ajax关闭div窗口效果

    这个方法可以发送异步请求到服务器,获取响应,并根据需要处理返回的数据。 要模拟关闭div窗口的效果,我们需要监听用户对窗口关闭按钮的点击事件。在jQuery中,我们可以使用`$('selector').click()`来绑定点击事件...

    Ajax笔记,异步数据

    6. **缓存机制**: XMLHttpRequest支持利用HTTP协议的缓存机制,对于重复请求,浏览器可能直接从缓存中获取数据,避免了不必要的网络通信。 7. **跨域问题**: 默认情况下,由于同源策略的限制,Ajax只能向同一源发送...

    ajax动态获取数据库中的数据方法

    Ajax的核心在于异步,`type:"get"`指定了请求类型为GET,这是从服务器获取数据的常见方式。`dataType:"json"`表明期望服务器返回的数据格式为JSON,JSON是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于...

    JQuery实现Ajax加载图片的方法

    通过Ajax,我们可以在页面上异步请求服务器的数据,并在获取数据后动态更新页面内容。而图片的Ajax加载,通常指的是在用户浏览网页时,仅加载当前显示区域的图片,而不加载整个页面的所有图片资源,从而提高页面加载...

Global site tag (gtag.js) - Google Analytics