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

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

转自:https://www.cnblogs.com/fanyong/p/3883670.html

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

模拟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); } });
你可能感兴趣的文章
我的友情链接
查看>>
分解质因数
查看>>
关于系统集成的设计方案(一)
查看>>
MAC远程服务修复:WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!
查看>>
Hadoop 1.2.1 伪分布式模式安装
查看>>
rip
查看>>
Windows Server 2016 New feature
查看>>
【Weblogic干货】一招搞定大内存设置
查看>>
Scala中的None,Nothing,Null,Nil
查看>>
我的创意仓库:Evernote by Winson漫画家
查看>>
hibernate关联的实验
查看>>
Java爬虫框架
查看>>
舌尖上的程序员
查看>>
apache-shiro 学习笔记
查看>>
分布式系统关注点——如何去实施「负载均衡」?
查看>>
awk 庖丁解牛获取连接状态数的awk数组命令
查看>>
微信小程序把玩(四十)animation API
查看>>
DocxToTextDemo
查看>>
Bootloader
查看>>
kafka+storm初探
查看>>