jquery中beforeSend和complete的使用 --- 提高用户体验

分手后的思念是犯贱 2021-12-09 21:04 216阅读 0赞

## **jquery的ajax请求步骤：** ##

$.ajax(
                    {
                        type:"GET",//通常会用到两种：GET,POST。默认是：GET
                        url:"a.php",//(默认: 当前页地址) 发送请求的地址
                        dataType:"html",//预期服务器返回的数据类型。
                        beforeSend:beforeSend, //发送请求
                        success:callback, //请求成功
                        error:error,//请求出错 
                        complete:complete//请求完成
                    });
                    }

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

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

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

## 第二：防止数据重复 ##

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

$('.btn').click(function(){
                //2.
                $.ajax({
                    type:'get',
                    url:'08sleep.php',
                    dataType:'json',
                    beforeSend:beforeSend,
                    success:function(res){
                        console.log(res);
                    },
                    error:function(){
                        console.log("连接错误");
                    },
                    complete:complete
                       
                })
                //2.防止数据重复
                //点击按钮请求数据 数据么有响应成功 用户可能再次点击 多次请求 可以禁止按钮
                function beforeSend(){
                    //禁用按钮防止重复提交
                    $(".btn").attr('disabled',true);
                }
                function complete(){
                    $(".btn").attr('disabled',false);
                }
    
    
            })

## 第三： 模拟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);
        }
    });