zoukankan      html  css  js  c++  java
  • 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);
        }
    });
  • 相关阅读:
    【BZOJ 3098】 Hash Killer II
    【BZOJ 1189】[HNOI2007]紧急疏散evacuate
    【BZOJ 1088】 [SCOI2005]扫雷Mine
    【BZOJ 1821】 [JSOI2010]Group 部落划分 Group
    【BZOJ 1013】 [JSOI2008]球形空间产生器sphere
    【BZOJ 1084】[SCOI2005]最大子矩阵
    【BZOJ 1085】 [SCOI2005]骑士精神
    JNday6-pm
    JNday6-am
    JNday5-pm
  • 原文地址:https://www.cnblogs.com/webmc/p/11403734.html
Copyright © 2011-2022 走看看