利用beforeSend实现提交加载中、form表单的重复提交等前端功能

前文

  在用JQ+bootstrap写前端的时候，有时需要实现点击按钮后失效的功能，比如下载按钮，为了避免网络延迟而引起的页面不及时跳转，让用户多次点击按钮，造成的服务器压力和用户体验就都不友好。发现Ajax里的beforeSend来实现这功能简直不要太棒。

beforeSend

  官方网址：http://api.jquery.com/Ajax_Events/
  依据官方网址，基本用法就是两个，访问页面前需要执行什么：内容填写到beforeSend里function；访问结束后需要实现什么，就填写到complete里面。

$.ajax({
   beforeSend: function(){
     // Handle the beforeSend event
   },
   complete: function(){
     // Handle the complete event
   }
   // ......
 });

第一个用法：禁止form表单的重复提交

  比如我的需求：点击下载按钮后执行下载时按钮失效，下载完后按钮再恢复使用。因为下载Excel或者csv必须得是form表单，而用form表单要实现禁止重复提交就如下所示，关于主体部分我这边就没写了，具体的导出按钮就可以如下代码所写。

<form action="/download/" method="post" onsubmit="return dosubmit()" target="_blank">
		<div>
                <input id='limit' style="float:right; margin:5px;" type="submit" value="导出">
       </div>
</form>
$("form").submit(function(){
            $.ajax({
              beforeSend:function () {
                    $(":submit",this).attr("disabled","disabled");
              },
              complete: function () {
                    $(":submit",this).removeAttr("disabled");
              }
            })
        });

  相比于用form表单来实现ajax，正常的ajax实现无疑更简单的多，这边也不过多介绍了。

第二个用法：实现加载中的效果

  有时用按钮失效也并不那么友好，比如长时间的网络io，如果只是失效，那用户只能白白等着了，用户体验很差，此时就可以用gif图片加弹窗(比如加载中…)来提示用户正在网络IO。

$("form").submit(function(){
            $.ajax({
              beforeSend:function () {
                    show_alert("<div style='text-align:center;'><p style='text-align:center;'>正在查询数据并发往审批...</p><br><img src='/static/images/loading.gif'></div>")
              },
              complete: function () {
                close_alert()
              }
            })
        });
function show_alert(msg, status) {
    if(status==610)
    {
        // 登录过期，刷新或重新登录
        $("#dlg2").html(msg)
        $("#dlg2").dialog("open")
    }
    else
    {
        // 显示错误信息
        $("#dlg").html(msg)
        $("#dlg").dialog("open")
    }
}

function close_alert() {
    $("#dlg").html("")
    $("#dlg").dialog("close")
    $("#dlg2").html("")
    $("#dlg2").dialog("close")
}

  比如延续上者，我们就可以通过上述代码来实现加载中的效果，实现效果如下：

总结

  这次就到这了，欢迎评论讨论～