使用JQuery 的$.ajax 方法进行异步请求,导致页面闪烁

情景

目前有个需求是在文本框填入内容,自动触发keyup事件,下拉列表会自动过滤相应的选项,但是使用了$,ajax后发现,每次触发事件时,都导致整个网页闪烁,触发了全局ajax事件

代码片段

$.ajax({
		   type: "POST",
		   url: root + "/xxx,
		   data: requestData,
		   dataType: "json",
		   success: function(data){

				// 清空列表
				$("#formOpinion #listLeft").empty();

				$.each(data,
						function(i, $data) {
							var $option = $("<option name='opinion.tag' value="
									+ $data.code + $data.name + ">" + $data.code
									+ $data.name + "</option>");
							// 绑定数据到listLeft
							$("#formOpinion #listLeft").append($option);
						});

		   }
		});

解决方案

查看JQuery API文档发现,$.ajax里面有个Global属性可以设置是否全局范围ajax事件,默认为true,改为false即可

时间: 2024-10-03 06:50:11

使用JQuery 的$.ajax 方法进行异步请求,导致页面闪烁的相关文章

重写ajax方法实现异步请求session过期时跳转登录页面

jQuery(function($){ // 备份jquery的ajax方法 var _ajax=$.ajax; // 重写ajax方法, $.ajax=function(opt){ var _success = opt && opt.success || function(a, b){}; var _error = opt && opt.error || function(a, b){}; var _opt = $.extend(opt, { success:functi

jQuery框架+DWR框架实现的Java Web中的Ajax效果(异步请求,局部刷新)

一 简介和实现效果 这里用一个小例子来简单举例说明,做一个搜索引擎搜索提示效果,通过不断输入字符,然后在下方给出搜索提示.效果图如下: 通过上图可以看到,当输入一个"a"时,提示了很多内容,然后继续输入一个"e"后,提示的范围明显就变小了. 注:在文末我会给出完整源代码的下载链接,以供大家参考 二 具体实现 1 在eclipse for java ee中创建一个Java Web工程,然后导入相应的jar包,特别说明的是:这里要导入一个额外的dwr.jar.也就是说,

ajax系列之用jQuery的ajax方法向服务器发出get和post请求

打算写个ajax系列的博文,主要是写给自己看,学习下ajax的相关知识和用法,以更好的在工作中使用ajax. 假设有个网站A,它有一个简单的输入用户名的页面,界面上有两个输入框,第一个输入框包含在一个form表单里用来实现form提交,第二个输入框是单独的.没有包含在form里,下面就用这两个输入框来学习下jQuery的ajax. 1,前端的html和javascript代码 页面html 1 <main style="text-align: center; margin: 200px a

JQuery中$.ajax()方法参数详解

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项

Jquery在unload中成功调用Jquery的.ajax方法

因为页面要求,需要在页面跳转的时候做一些数据的保存工作,试了很多次,发现Jquery的unload事件中调用.ajax方法,在FireFox中可以顺利执行,但是在Chromium下却返回了textStatus为error的消息.试验过很多方法,例如在页面离开时弹出确认框,这样虽然返回了error消息,但是数据库显示操作执行完毕.将确认框除去后,数据库依然没有响应. 查阅多方资料后,发现是以为.ajax的异步响应问题,把ajax请求改为同步的,问题解决. 代码如下: 1 $(window).unl

JQuery中$.ajax()方法参数

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项

JQuery中$.ajax()方法参数详解 (转)

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项

使用AJAX技术发送异步请求,HTTP服务端推送

使用AJAX技术发送异步请求 什么是AJAX AJAX指一步Javascript和XML(Asynchronous JavaScript And XML),它是一些列技术的组合,简单来说AJAX基于XMLHttpRequest让我们在不重载页面的情况下和服务器进行数据交换. 加上JavaScript和DOM(Document Object Model,文档对象模型),我们就可以在接收到响应数据后局部更新页面.XML指的是数据的交互模式,可以是纯文本(Plain Text).HTML或JSON.

jquery中$.ajax方法提交表单

function postdata(){                        //提交数据函数 $.ajax({                                //调用jquery的ajax方法 type: "POST",                       //设置ajax方法提交数据的形式 url: "ok.php",                      //把数据提交到ok.php data: "writer=