Ajax出现 beforeSend 和 complete 的方法失效问题（已解决）

一、背景

    在点击按钮使用 Ajax 提交表单的时候，希望在提交到服务器之前锁定提交按钮（避免重复点击给后台数据库带来脏数据的风险），并提示文件正在处理；在完成与服务器交互后，解锁提交按钮。问题来了，写完后发现 beforeSend 和 complete 后面带的方法都失效，没有得到想要的效果。

二、问题解决

（1）、原因：

    Ajax 的 async 属性被我设置为 false ，即请求为同步请求。当 ajax 为同步请求时，会阻塞渲染对话框的线程，以致不能显示对话框，按钮锁定也无效。

（2）、解决:

    只要将 async: false 改为 async: true即可。

三、奉上代码

<a href="javascript:void(0)" class="easyui-linkbutton" style="width: 98%" onclick="submitForm()" id="submit">提交</a>

function submitForm(){
    var fd = new FormData();
    var file = document.getElementsByName("fb")[0].files[0];
    if (file === undefined) {
        $.messager.alert("提示","文件数据为空请正确上传文件!");
        return;
    }
    //上传的参数名 参数值 k-v键值对
    fd.append("file", file);
    $.ajax({
        url:"${ctx}/bom/getLatestOrder.do",
        type:"post",
        data:fd,
        async : true, //此处为异步加载
        processData: false, // 告诉jQuery不要去处理发送的数据
        contentType: false, // 告诉jQuery不要去设置Content-Type请求头
        beforeSend: function () {
            $("#submit").attr({ disabled: "disabled" });// 禁用按钮防止重复提交
            $.messager.progress({ 
            	title: '提示', 
            	msg: '文件处理中，请稍候……', 
            	text: '' 
            });
        },
        success:function(data){
             if (data.message != null) {
                $.messager.alert("提示",data.message);
             }
             if (data.infos != null){
                location.href = "${ctx }/bom/messageExport.do";
             }
        },
        complete: function () {
            $.messager.progress('close');
            $("#submit").removeAttr("disabled");
        },
        error:function(e){
             $.messager.alert("错误","服务器异常，请稍后重试！！！<br/>"+e.message);
        },
    });

}

四、知识积累

Ajax请求中的async:false/true的作用

    async. 默认是 true，即为异步请求，$.ajax执行后，会继续执行ajax后面的脚本，直到服务器端返回数据后，触发$.ajax里的success方法，这时候执行的是两个线程。

    async 设置为 false，则所有的请求均为同步请求，在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。