ajax用beforeSend自定义请求过程中客户端事件，提高用户体验

Posted 2020-10-15 香吧香

本文为博主原创，未经允许不得转载：

       在应用ajax的过程中，当我们再前台提交请求的时候，如果服务端响应事件比较长，就会导致需要等很长时间在前台才能接受到服务端返回的

响应结果，往往会导致用户重复点击按钮，进行重复请求，如何可以避免这种情况发生，ajax提供了一个beforeSend属性，用这个既可以避免这种

情况发生。

       用这个属性可以定义客户端向服务端请求过程中的事件，比如在请求过程中禁用请求按钮的属性，或定义请求加载状态等，

实现的代码如下：

  

function exportData(){
            $.ajax({
                type: "post",
                cache: false,
                async: true,
                data: {
                    "name":$("#cameraName").val(),
                    "createTime":$("#createTime").val(),
                    "lastTime":$("#lastTime").val()
                },
                beforeSend: function () {
                    //此处定义并调用jquery-confirm的加载层事件
                    obj = jqconfirmTip(\'正在响应请求,请稍候...\',\'fa fa-spinner fa-spin\');
                    return true;
                },
                dataType: \'json\',
                url: "exportDetail?rnd=" + Math.random(),
                success: function (a) {
                    if (a.resultCode == "SUCCESS") {   
                        obj.close();  //关闭加载层
                    } else {
                        alert("导出失败");
                        obj.close();
                    }
                },
                error: function (msg) {
                    alert("请求失败");
                    obj.close();
                }
            });
        }
        
//jquery-confirm插件，需要引入jquery-confirm.js    （该方法可以直接调用）    
function jqconfirmTip(title, icon) {
    var obj = $.confirm({
        backgroundDismiss : false,
        content : false,
        icon : icon,
        title : title,
        // autoClose : \'confirm|10000\',
        animation : \'scaleY\',
        closeIcon : false,
        columnClass : \'col-md-4 col-md-offset-4\',// col-md-6 col-md-offset-3
        confirmButton : false,
        cancelButton : false,
        theme : \'black\'
    });
    return obj;
}        
        

效果如图：

 

上述例子中的应用根据服务端返回的结果类型，去关闭该加载层。

     同时ajax也提供了请求完成后回调函数 (请求成功或失败之后均调用)的属性，该属性为：complete，可在此处定义回调事件，关闭或停止beforeSend处定义的事件

示例如下：

$.ajax({
    type: "post",
    contentType: "application/json",
    url: "/userList",
    beforeSend: function () {
        $("loading").show();
    },
    success: function (data) {
        if (data == "Success") {
            // ...
        }
    },
    complete: function () {
        $("loading").hide();
    },
    error: function (data) {
          $("loading").hide();
    }
});

。