一、html页面的写法

<script src="\layui/layui.js"></script>
<script src="\js/jquery-3.1.1.js"></script>
<!--一定放到jquery和layui后面加载-->
<script src="\js/ajax-error.js"></script>
<script>
	layui.use('form', function(){
		var form = layui.form;
		form.on('submit(updateWord)', function(data){
			//提交单词
			var loadIndex = layer.load(1, {shade: 0.3});
			var ajaxTimeout = $.ajax({
				url : "/admin/word/wordUpdate",
				type : "post", // 提交方式
				contentType: "application/json;charset=UTF-8", //发送数据的格式
				timeout : 10000,//请求超时时间
				data : JSON.stringify(data.field),
				dataType : "json",
				async:false//执行中执行下面代码
			});
			layer.close(loadIndex);
			return false;
		});
	});
</script>

二、ajax-error.js文件

/*ajax全局异常设置*/
$(function(){
    $.ajaxSetup({
        type: "POST",
        success : function(data) {
            if(data.code == 0){
                layer.msg(data.message);
            }else if(data.code == 500){
                layer.msg(data.message);
            }
        },complete : function(XMLHttpRequest,status){
            //请求完成后最终执行参数      
            if(status=='timeout'){
                //停止请求    
                ajaxTimeout.abort();
                layer.msg("请求服务器超时!请稍后重试");
            }
        },error: function(jqXHR, textStatus, errorThrown) {
            let message = "";
            let shadeClose = true;
            let shadeNum = 0.3;
            switch(jqXHR.status) {
                case(500):
                    message = "服务器系统内部错误";
                    break;
                case(401):
                    message = "<p style='margin:30px;'>登录过期,请退出重新登录</p>";
                    shadeClose = false;
                    shadeNum = 0.7;
                    break;
                case(403):
                    message = "无权限执行此操作";
                    break;
                case(408):
                    message = "请求超时!请稍后重试";
                    break;
                default:
                    message = "未知错误";
            }
            layui.use('layer', function(){
                var layer = layui.layer;
                layer.open({
                    type:1,
                    title:false,
                    closeBtn: 0, //不显示关闭按钮
                    anim: 2,
                    shadeClose: shadeClose, //开启遮罩关闭
                    content: message,
                    shade:shadeNum,//遮罩
                    scrollbar: false//禁用滚动条
                });
            });

        }
    });
});

注意:这种写法只适用于统一返回结果的项目中,而且页面ajax自定义返回结果(如:success,error等),全局ajax将不会生效。

最后修改于 2020-09-08 16:52:02
如果觉得我的文章对你有用,请随意赞赏
扫一扫支付
上一篇