一个菜鸟的互联网技术分享博客
您的位置: 主页 > jquery ajax防重复提交
advertisement

jquery ajax防重复提交

巧用Ajax的beforeSend 提高用户体验

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

  1. $.ajax({  
  2.     beforeSend: function(){  
  3.      // Handle the beforeSend event  
  4.     },  
  5.     complete: function(){  
  6.      // Handle the complete event  
  7.     }  
  8.     // ......  
  9. });  

防止重复数据


举个例子:

  1. // 提交表单数据到后台处理  
  2. $.ajax({  
  3.     type: "post",  
  4.     data: studentInfo,  
  5.     contentType: "application/json",  
  6.     url: "/Home/Submit",  
  7.     beforeSend: function () {  
  8.         // 禁用按钮防止重复提交  
  9.         $("#submit").attr({ disabled: "disabled" });  
  10.     },  
  11.     success: function (data) {  
  12.         if (data == "Success") {  
  13.             //清空输入框  
  14.             clearBox();  
  15.         }  
  16.     },  
  17.     complete: function () {  
  18.         $("#submit").removeAttr("disabled");  
  19.     },  
  20.     error: function (data) {  
  21.         console.info("error: " + data.responseText);  
  22.     }  
  23. });  

模拟Toast效果

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

  1. $.ajax({  
  2.     type: "post",  
  3.     contentType: "application/json",  
  4.     url: "/Home/GetList",  
  5.     beforeSend: function () {  
  6.         $("loading").show();  
  7.     },  
  8.     success: function (data) {  
  9.         if (data == "Success") {  
  10.             // ...  
  11.         }  
  12.     },  
  13.     complete: function () {  
  14.         $("loading").hide();  
  15.     },  
  16.     error: function (data) {  
  17.         console.info("error: " + data.responseText);  
  18.     }  
  19. });  

zhangren.online
上一篇:javaascript、ajax三级联动
下一篇:Js/Jquery获取网页屏幕可见区域高度

您可能喜欢

​常用函数

​常用函数

​jquery文字左右无缝滚动

​jquery文字左右无缝滚动

​前端base64转换成图片

​前端base64转换成图片

​input中输入大于0的正整数

​input中输入大于0的正整数

回到顶部