Ajax的前置方法和后置方法用法详解

jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作。

具体可参考jQuery官方文档:http://api.jquery.com/Ajax_Events/

标准语法:

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

 beforeSend方法可以防止用户重复提交,使用beforeSend方法将按钮或者触发器的状态改为禁用或者隐藏状态,

例如:

$.ajax({
    beforeSend: function(){
        $("id|class").attr({ disabled:"disabled" }); #$("id|class").css("display","none");
    }
})

一个ajax完整提交实例

$.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);  
    }  
});

使用beforeSend方法模拟toast效果,例如大家常用的 (正在加载中......)

$.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://sulao.cn/post/392.html

我要评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。