博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Ajax的beforeSend 和complete来提高Ajax请求的用户体验
阅读量:6978 次
发布时间:2019-06-27

本文共 990 字,大约阅读时间需要 3 分钟。

hot3.png

jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作。

具体可参考jQuery官方文档:

$.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);    }});

 

转载于:https://my.oschina.net/chendongj/blog/1627215

你可能感兴趣的文章
TCP/IP:IP选项处理
查看>>
【网摘】检测 iframe 是否加载完成
查看>>
cocos2dx 3.x(动态改变精灵的背景图片)
查看>>
cocos2d-x JS 获取当前系统时间(解决屏幕双击点击事件)
查看>>
支付宝接入参考博客
查看>>
学习Spring中遇到关于BeanFactory及测试类的问题
查看>>
现实迷途 第七章 特殊客户
查看>>
找水王
查看>>
fgets()用法笔记
查看>>
mysql以及mysql bench安装教程
查看>>
Linear Regression with machine learning methods
查看>>
在 Azure 网站上使用 Memcached 改进 WordPress
查看>>
数据库备份定期删除程序的开发。
查看>>
启动Genymotion时报错Failed to initialize backend EGL display
查看>>
BZOJ 1040 ZJOI2008 骑士 树形DP
查看>>
联想S820 MIUI刷机包 MIUI 4.4.30 流畅执行 在线主题破解
查看>>
2017-2-23 C#基础 中间变量
查看>>
CSS中连接属性的排序
查看>>
windows加载符号小计
查看>>
业务组件架构的思考
查看>>