`
妖术在烧纸
  • 浏览: 9278 次
  • 性别: Icon_minigender_2
  • 来自: 成都
社区版块
存档分类
最新评论

Ajax beforeSend提升用户体验

阅读更多
1.当网速差或服务端无响应的时候,为了防止用户不去反复的点击提交按钮,给服务器端造成压力,我们采取beforeSend来解决在服务器没有响应回来的时候按钮禁止点击的状态,以减小用户不停的请求给服务器端造成的压力
$.ajax({
				url: serverName + url,
				data: $.extend(param, {sid: id, st: token}),
				crossDomain: true,
				type: 'POST',
				dataType: 'json',
				beforeSend: function () {
			        // 禁用按钮防止重复提交
			    	$("#submit").attr({ disabled: "disabled" });
			    },
				complete: function(resp){
					alert(resp.getAllResponseHeaders());
				},
				success: function(data,request) {

					if (data.status == 'OK') {
						func1(data);
					} else {
}

2.常见的loading效果也可以在这时采用beforeSend方法来制作。
分享到:
评论

相关推荐

    浅析巧用Ajax的beforeSend提高用户体验

    jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作。 $.ajax({ beforeSend:function(){ // handle the beforeSend event }, complete:...

    Jquery中巧用Ajax的beforeSend方法

    jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作。 $.ajax({ beforeSend: function(){ // Handle the beforeSend event }, complete: ...

    jquery.ajax之beforeSend方法使用介绍

    常见的一种效果,在用ajax请求时,没有返回前会出现前出现一个转动的loading小图标或者“内容加载中..”,用来告知用户正在请求数据。这个就可以用beforeSend方法来实现。 下载demo:ajax loading 代码如下: 代码...

    Ajax 实现加载进度条

    先说说这个 beforeSend, 在请求发送前执行 比如 可以判断用户有没有登录 ,如果没有登录就停止请求 并提示。 $.ajax({ url : 'my_action', dataType: 'script', beforeSend : function(xhr, opts){ if(1 == 1...

    浅谈jQuery中Ajax事件beforesend及各参数含义

    Ajax会触发很多事件。 有两种事件,一种是局部事件,一种是全局事件: 局部事件:通过$.ajax来调用并且分配。 $.ajax({ beforeSend: function(){ // Handle the beforeSend event }, complete: function(){ // ...

    jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序

    2.beforeSend(局部事件) 3.ajaxSend(全局事件) 4.success(局部事件) 5.ajaxSuccess(全局事件) 6.error(局部事件) 7.ajaxError (全局事件) 8.complete(局部事件) 9.ajaxComplete(全局事件) 10.ajaxStop(全局...

    Ajax全局加载框(Loading效果)的配置

    在Ajax进行后台数据请求的过程中,我们有时候会希望用户能知道页面后台还在做一些事情,这时候就需要给用户一个非常明确的提示,也就是我们所谓的进度条 实现原理: Jquery可以对ajax进行全局的设置,实现类似于C#...

    jquery ajax请求方式与提示用户正在处理请稍等

    为了提高用户体验度,我们通常会给出 “正在处理,请稍等!”诸如此类的提示。我们可通过设置$.ajax()下的参数beforeSend()来实现

    Jquery Ajax学习实例7 Ajax所有过程事件分析示例

    一、Ajax所有过程事件分析  JQuery在执行Ajax的过程中会触发很多事件。 这些事件可以分为两种事件,一种是局部事件(Local),一种是全局事件(Global)。 局部事件:可以通过$.ajax来调用,你某一个Ajax...beforeSend 局

    巧用ajax请求服务器加载数据列表时提示loading的方法

    我们利用weui.js中的weui.loading为效果,ajax的beforeSend与complete方法,做一个加载数据时会有几秒的 loading… 要在页面需要加载的JS文件: [removed][removed] 可以去weui的文档中下载,这是它的demo: ...

    jquer之ajaxQueue简单实现代码

    (function($) { $.ajaxQueue = { // 管理ajax请求的队列 requests: new Array(), // 把待发送的ajax请求加入队列 offer: function(options) { var _self = this, // 对complete,beforeSend方法进行“劫持”,加入...

    jQuery的 $.ajax防止重复提交的两种方法(推荐)

    即在beforeSend中使点击按钮不可用,ajax结果返回后置为可用 $.ajax( { type: 'POST', url: APP+'?m=Shopping&a=ajaxSubmitorder&sid='+sid+'&src='+src,\ncache:false,\ndataType: 'json', data: {'src':src,uid: ...

    ajaxfileupload.js

    1.调用createUploadForm,此方法中增加了change参数,此参数用户给新生成的input-file元素绑定change事件,如果不需要可以不加此参数。 2.要上传的input-file元素,建议放id和name属性,而且这两个属性值要保持一致 ...

    jQuery Ajax中的事件详细介绍

    Ajax会触发很多事件。 有两种事件,一种是局部事件,一种是全局事件: 局部事件:通过$.ajax来调用并且分配。 代码如下: $.ajax({  beforeSend: function(){  // Handle the beforeSend event  },  complete: ...

    ajax+c#无刷新分页

    beforeSend:function(){$("#divload").show();$("#Pagination").hide();},//发送数据之前 complete:function(){$("#divload").hide();$("#Pagination").show()},//接收数据完毕 success:function(json) { $("#...

    jQuery在header中设置请求信息的方法

    beforeSend: function(xhr){xhr.setRequestHeader('X-Test-Header', 'test-value');},//这里设置header success: function() {} }); 也就是setRequestHeader函数 如何在ajax请求中设置特殊的Requ

Global site tag (gtag.js) - Google Analytics