运维系列&jQuery系列【仅供参考】：jquery中beforeSend和complete的使用 --- 提高用户体验&&设置请求头

---

jquery中beforeSend和complete的使用 — 提高用户体验&&设置请求头

beforeSend方法的用户主要有下面几个：

第一：用于在发送ajax请求之前设置请求头

即作为前端，如果我们希望在发送数据之前设置请求头，就可以像下面这么做：

beforeSend: function(request) {
     request.setRequestHeader("BBG-Key", "ab9ef204-3253-49d4-b229-3cc2383480a6");
}, 

第二：防止数据重复

当用户提交表单时，虽然有时候已经点击了提交按钮，但是由于网络原因，会出现暂时没有返回数据等情况，用户会认为没有点击成功，就会造成数据库中产生多条重复的数据—脏数据，所以我们可以在beforeSend中添加禁用提交按钮的功能，在complete后在恢复之，如下：

// 提交表单数据到后台处理
$.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);
    }
});

---

Wayne-Zhu

jquery中beforeSend和complete的使用 — 提高用户体验&&设置请求头