jQuery 全局配置方法 ajaxSetup() 介绍并在 Lavarel 中的妙用

阅读数: 1497 2018年11月01日

在使用 $.ajaxSetup() 方法设置后,再使用 $.ajax() 等方法,就可以省略一些配置。

比如,在 Lavarel 中:

$(function () {        $.ajaxSetup({
            /*{{--
            如果jQuery.ajaxSetup()上的global属性是true,会在每个Ajax请求上引发全局事件。
            jQuery.ajaxSetup()上的global属性默认是true。
            注意:全局事件不会针对跨域脚本或JSONP请求引发,无论global的值是什么。
            为 true 的时候,下面的全局事件才能生效
            --}}*/
            global: true
            /*{{--请求URL,默认取当前页面,具体处理的时候,可以自己设置--}}*/
            , url:"{{url()->current()}}"
            , type: "POST"
            , dataType: "json"
            , headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
            , cache: false
        });

    });
layui.use(['element', 'layer'], function () {
        var element = layui.element;
        var layer = layui.layer;
        var loading;

        /*{{--设置全局事件注册--}}*/
        /*{{--注册一个处理函数,当第一个Ajax请求开始之前调用它。--}}*/
        $(document).ajaxStart(function () {
            loading = layer.load(2, {shade: 0.2});
        });

        /*{{--注册一个处理函数,在Ajax请求结束时调用它。--}}*/
        $(document).ajaxComplete(function (event, request, settings) {
            layer.close(loading);
        });

        /*{{--注册一个处理函数,在Ajax请求以出错告终时调用它--}}*/
        $(document).ajaxError(function (event, request, settings) {
            layer.close(loading);
            if ($.trim(request.responseJSON.msg) != '') {
                layer.msg(request.responseJSON.msg, {icon: 5});
            } else {
                layer.msg("请求失败
status:" + request.status + "
statusText:" + request.statusText, {icon: 5});
            }
        });
        /*{{--注册一个处理函数,当所有的Ajax请求都结束时调用它--}}*/
        $(document).ajaxStop(function () {
            layer.close(loading);
        });
        /*{{--附加一个函数,当一个Ajax请求成功地结束时执行它--}}*/
        $(document).ajaxSuccess(function (event, request, settings) {
            layer.close(loading);
        });

    });

以上代码全局设置 csrf-token 自动在头文件传递,ajax 各种状态下的回调操作:开始、成功、失败、停止、完成分别操作 layer 的效果。

然后在子模板中使用 $.ajax $.post $.get 等 ajax 方法的时候,无需单独配置了。省下不少代码。


参考资料
http://www.runoob.com/jquery/ajax-ajaxsetup.html
http://www.php.cn/js-tutorial-372312.html
phpriji.cn | 网站地图 | 沪ICP备17015433号-1