Ajax的beforeSend

jQuery是经常使用的一个开源js框架，其中的$.ajax请求中有一个beforeSend方法，用于在向服务器发送请求前执行一些动作。
具体可参考jQuery官方文档：http://api.jquery.com/Ajax_Events/

$.ajax({beforeSend: function(){// Handle the beforeSend event},complete: function(){// Handle the complete event}// ......
});

防止重复数据

在实际项目开发中，提交表单时常常由于网络或者其原因，用户点击提交按钮误认为自己没有操作成功，进而会重复提交按钮操作次数，如果页面前端代码没有做一些相应的处理，通常会导致多条同样的数据插入数据库，导致脏数据的增加。要避免这种现象，在$.ajax请求中的beforeSend方法中把提交按钮禁用掉，等到Ajax请求执行完毕，在恢复按钮的可用状态。

举个例子：

// 提交表单数据到后台处理
$.ajax({type: "post",data: studentInfo,contentType: "application/json",url: "/Home/Submit",beforeSend: function () {// 禁用按钮防止重复提交$("#submit").attr({ disabled: "disabled" });},success: function (data) {if (data == "Success") {//清空输入框clearBox();}},complete: function () {$("#submit").removeAttr("disabled");},error: function (data) {console.info("error: " + data.responseText);}
});

模拟Toast效果

ajax请求服务器加载数据列表时提示loading(“加载中，请稍后...”),

$.ajax({type: "post",contentType: "application/json",url: "/Home/GetList",beforeSend: function () {$("loading").show();},success: function (data) {if (data == "Success") {// ...}},complete: function () {$("loading").hide();},error: function (data) {console.info("error: " + data.responseText);}
});

Global Events

These events are triggered on the document, calling any handlers which may be listening. You can listen for these events like so:

 $(document).bind("ajaxSend", function(){$("#loading").show();}).bind("ajaxComplete", function(){$("#loading").hide();});

Global events can be disabled for a particular Ajax request by passing in the global option, like so:

$.ajax({

url: "test.html",

global: false,

// ...

});

Ajax的beforeSend相关推荐

巧用Ajax的beforeSend 提高用户体验--防止重复数据
巧用Ajax的beforeSend 提高用户体验 jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作. 具体可参考j ...
Ajax的beforeSend 和 complete
前端的童鞋们:在项目中都会遇到向后台请求数据: 通常会采用ajax请求,在请求的过程中有时返回的数据过多或者用户网络慢的原因,导致页面一开始会有空白页面,这样给用户带来的体验不好 $.ajax请求中有 ...
jquery.ajax之beforeSend方法使用介绍
常见的一种效果,在用ajax请求时,没有返回前会出现前出现一个转动的loading小图标或者"内容加载中..",用来告知用户正在请求数据.这个就可以用beforeSend方法来实现 ...
jQuery中Ajax事件beforesend及各参数含义
Ajax会触发很多事件. 有两种事件,一种是局部事件,一种是全局事件: 局部事件:通过$.ajax来调用并且分配. $.ajax({ beforeSend: function(){ // Han ...
ajax beforesend xhr对象,jQuery中Ajax事件beforesend及各参数含义(示例代码)
转自:http://blog.sina.com.cn/s/blog_609f9fdd0100wprz.html Ajax会触发很多事件. 有两种事件,一种是局部事件,一种是全局事件: 局部事件:通过$ ...
ajax beforesend xhr对象,jq ajax之beforesend(XHR)
用于在向服务器发送请求前添加一些处理函数.例如:搜寻附近店铺,未搜寻出来的时候显示:正在搜寻中... 常见的一种效果,在用ajax请求时,没有返回前会出现前出现一个转动的loading小图标或者&qu ...
ajax get before,jquery的ajax()之 beforeSend属性详解
方法beforeSend,用于在向服务器发送请求前添加一些处理函数.这是一个ajax事件,在ajax请求开始之前就被触发,通常允许用户修改XMLHttpRequest对象(比如说设置附加的头部信息). ...
Ajax的beforeSend用处
jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作. 具体可参考jQuery官方文档:http://api.jque ...
Ajax出现 beforeSend 和 complete 的方法失效问题（已解决）
一.背景在点击按钮使用 Ajax 提交表单的时候,希望在提交到服务器之前锁定提交按钮(避免重复点击给后台数据库带来脏数据的风险),并提示文件正在处理:在完成与服务器交互后,解锁提交按钮.问题来了,写 ...

Ajax的beforeSend

防止重复数据

模拟Toast效果

Global Events

Ajax的beforeSend相关推荐

最新文章

热门文章