jquery中ajax发送请求时关于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);
    }
});
原文地址:https://www.cnblogs.com/webmc/p/11403734.html