关于ajax的页面加载操作防止脏数据的产生
来源:互联网 发布:淘宝投诉未生产扣几分 编辑:程序博客网 时间:2024/06/03 21:05
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); }});
0 0
- 关于ajax的页面加载操作防止脏数据的产生
- 页面的下拉加载效果基于ajax加载数据
- 防止在readOnly的input页面产生页面返回
- AJAX防止页面缓存的代码
- 关于 ie 下使用 iframe 加载子页面时,子页面ajax数据能进入success方法,但是数据为空的问题
- 如何让ajax技术显示数据的jsp页面第一次加载就加载默认查询数据
- 关于ajax的操作
- ajax 提交数据产生乱码的原因
- ajax请求的与页面本身有的数据(页面加载时候存在)的一个区别
- js 下拉底部加载|滑轮滚动到页面底部ajax加载数据的实例
- 用加载图片解决在ajax数据加载中页面出现短暂空白的问题
- Ajax 数据加载的实现
- 页面防止多线程操作而锁定页面的解决办法
- 防止僵尸进程的产生
- jsoup获取ajax动态加载的页面
- 在页面加载的时候调用MBPROGRESSHUD产生菊花图?
- ASP.NET中防止页面多次加载的IsPostBack属性
- ASP.NET中防止页面多次加载的IsPostBack属性
- 短信管理器(SmsManager)
- ScyllaDB 1.2 国内安装更新源发布
- XMG 父子控制器 自定义控制器的切换 Second
- 165. Compare Version Numbers
- JAVA自学之每日一题(三)
- 关于ajax的页面加载操作防止脏数据的产生
- 重启Hadoop集群时no namenode to stop的异常
- jsp页面报错提示编码错误信息
- winpcap编程抓包实例和windump使用
- Hibernate框架学习(一 )
- AngularJS 常见面试问题
- ListView多布局适配器判断条件
- AFNetWorking 图片上传,进度条监控
- centos启用ftp功能