2019-07-24 单页面应用中JQuery-ajax使用

在单页面app中如何配合laravel更好的使用ajax

解释常用到的ajax参数

$.ajax({
        url: "/test",  //ajax请求地址
        //(默认: true,dataType为script和jsonp时默认为false)设置为 false 将不缓存此页面，建议使用默认
        cache: false,
        //请求方式 "POST" 或 "GET"， 默认为 "GET"。
        //注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
        type:"GET",
        dataType:"json",    //根据返回数据类型可以有这些类型可选：xml html script json jsonp text
        //发送到服务器的数据，可以直接传对象{a:0,b:1}，
        //如果是get请求会自动拼接到url后面，如：&a=0&b=1
        //如果为数组，jQuery 将自动为不同值对应同一个名称。
        //如 {foo:["bar1", "bar2"]} 转换为 "&foo=bar1&foo=bar2"。
        data:{},
        //发送请求前可修改 XMLHttpRequest 对象的函数，
        //如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。
        //这是一个 Ajax 事件。如果返回false可以取消本次ajax请求。
        beforeSend:function(xhr){
            //this 默认为调用本次AJAX请求时传递的options参数
        },
        //请求成功后的回调函数
        success: function(data,textStatus){
            //this 调用本次AJAX请求时传递的options参数 ,
            //如果设置context来改变了this，那这里的this就是改变过的
        },
        //请求失败时调用此函数。有以下三个参数：
        //XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。
        //如果发生了错误，错误信息（第二个参数）除了得到null之外，
        //还可能是"timeout", "error", "notmodified" 和 "parsererror"。
        error:function(XMLHttpRequest, textStatus, errorThrown){
            // 通常 textStatus 和 errorThrown 之中
            // 只有一个会包含信息
            // this 调用本次AJAX请求时传递的options参数
        },
        //请求完成后回调函数 (请求成功或失败之后均调用)。
        //参数： XMLHttpRequest 对象和一个描述成功请求类型的字符串
        complete:function(XMLHttpRequest, textStatus) {
            //this 调用本次AJAX请求时传递的options参数
        },
        //一组数值的HTTP代码和函数对象，当响应时调用了相应的代码。例如，如果响应状态是404，将触发以下警报：
        statusCode:{
            404:function(){
                alert('404，页面不存在');
            }
        }
    });

jquery 的complete(XHR, TS)回调方法,可以理解为是响应的拦截器,而beforeSend可以理解为请求的拦截器

// todo ajax设置
$.ajaxSetup({
    beforeSend: function (xhr) {
        getToken('/blank_csrf_request', function (token) {
            xhr.setRequestHeader('X-XSRF-TOKEN', token); // 设置请求头(同步请求)
        });
    },
    complete: ajaxError || function () {
    }
});

complete 回调处理,没登录laravel中间件直接抛出401错误.ajax监听到进行登录页的跳转

var ajaxError = function (xhr) {
    var status = xhr.status;
    if (status === 401) {
        // 未登录 跳转登录页
    } else if (status === 403) {
        // 其他错误 如商品收藏中的商品已下架
    }else{
        // todo 正常页面处理逻辑  
        // 如添加访问记录
    }
};

除此之外还需在每个A类页面判断是否有权限访问,如无权限还应该显示待登录页面
其中A类页面为底部导航栏对应的页面,如下图中首页,我的都为A类页面.

image.png

两小时不点击系统报错,如何处理? 其实是CSRF失效不存在导致的问题

// todo 获取TOKEN
var getToken = function (url, callback) {
    url = url || '/';
    var XSRF_TOKEN = document.cookie.match(/(^| )XSRF-TOKEN=([^;]*)(;|$)/);
    if (!XSRF_TOKEN || XSRF_TOKEN === "") {
        //发送一个空请求(同步)以更新cookie里的xsrf_token
        $.ajax({
            url: url,
            async: false,//同步
            beforeSend: function () {
            },
            success: function () {
                callback && callback(unescape(document.cookie.match(/(^| )XSRF-TOKEN=([^;]*)(;|$)/)[2]));
            }
        });
    } else {
        callback && callback(unescape(XSRF_TOKEN[2]))
    }
};

需要在laravel中增加路由

//全局的一个空请求以更新cookie里的xsrf token
Route::get('blank_csrf_request', 'Front\IndexController@blank_csrf_request');

对应方法

//全局的一个空请求以更新cookie里的xsrf token
    public function blank_csrf_request()
    {
        //该方法不需要做任何操作，自动会Set-Cookie:XSRF-TOKEN=...
        return;
    }

完

最后编辑于：2019.07.31 09:55:04