一、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
如果觉得我的文章对你有用,请随意赞赏
扫一扫支付