jquery Ajax响应前和完成事件
来源:互联网 发布:在linux部署测试环境 编辑:程序博客网 时间:2024/06/12 01:49
巧用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); }});
0 0
- jquery Ajax响应前和完成事件
- jquery Ajax响应前和完成事件
- jquery.ajax和http servlet响应
- jquery自动完成(ajax)
- jquery响应回车事件
- 修改JQuery中 和 ExtJS 中Ajax的响应时间
- jquery中的AJAX请求响应
- 如何让动态创建的页面元素响应用户事件 (HTML/javascript/jQuery/Ajax/DOM)
- jquery 禁止回车事件响应
- jQuery页面加载响应事件
- jQuery Ajax事件-seriallize()
- jquery ajax全局事件
- jquery ajax全局事件
- jquery ajax监听事件
- jquery ajax 事件
- JQuery 中的AJAX事件
- JQuery AJAX 事件顺序
- AJAX请求和响应
- c:forEach 两列显示图片
- Android控件之SeekBar 设置最小值非零
- ecpilse中properties文件中文乱码问题,ASCII码
- 树莓派启动浏览器
- php学习笔记一
- jquery Ajax响应前和完成事件
- 【linux】linux tomcat服务器跑项目
- 局域网内mysql连接慢的解决办法
- ionic入门教程第二十课-在微信中使用ionic的解决方案(开源框架)
- websphere 发布配置
- MySql-InnoDB存储引擎的锁和事务
- mysql 查询锁表和解锁
- NSIS创建快捷方式增加起始位置的解决教程
- 处理字符串中的6字节乱码汉字 C3 XX C2 XX C2 XX