layui之ajax巨坑

Posted 2020-10-09 A欣

在使用layui做前端框架的时候，在请求ajax时，回调函数不执行问题，找了各种原因，各种的更改ajax参数类型和webapi返回类型 各种不行，最后发现layui默认是form提交，想要让他执行ajax回调就只是一句话 return false  看代码

layui.use([‘form‘, ‘layer‘], function () {
$ = layui.jquery;
var form = layui.form
,layer = layui.layer;

//自定义验证规则
form.verify({
nikename: function (value) {
if (value.length < 5) {
return ‘昵称至少得5个字符啊‘;
}
}
, pass: [/(.+){6,12}$/, ‘密码必须6到12位‘]
, repass: function (value) {
if ($(‘#L_pass‘).val() != $(‘#L_repass‘).val()) {
return ‘两次密码不一致‘;
}
}
});

以上只是框架加载部分

//监听提交
form.on(‘submit(add)‘, function (data) {
if (post_adduser) return;
post_adduser = true;
var UserName = $("#username").val();
var Password = $("#L_pass").val();
var FullName = $("#L_email").val();
var Phone = $("#phone").val();
var index = document.getElementById("Dropplace").selectedIndex;
var p = document.getElementById("Dropplace").options[index].value;
var index1 = document.getElementById("Droproles").selectedIndex;
var c = document.getElementById("Droproles").options[index1].value;
var RoleIDs = p + "||" + c;
var loading = layer.load(1);
var user = "{\"UserName\":\"" + UserName + "\",\"Password\":\"" + Password + "\",\"FullName\":\"" + FullName + "\",\"Phone\":\"" + Phone + "\",\"RoleIDs\":\"" + RoleIDs + "\"}";
$.ajax({
url: "http://xxxxxxxxxxxxxx/api/User/AddUser",
//dataType: ‘text‘,
contentType: "application/json",
data: user, //请求的附加参数，用json对象
method: ‘POST‘,
success: function (res) {
if (res == true) {
post_adduser = false;
layer.close(loading);
layer.msg("添加成功", { icon: 6, time: 2000 }, function () {
// 获得frame索引
parent.location.reload();
var index = parent.layer.getFrameIndex(window.name);
//关闭当前frame
parent.layer.close(index);
});
}
else {
post_adduser = false;
layer.close(loading);
layer.msg("添加失败", { icon: 5 });
}

},
error: function () {
post_adduser = false; //AJAX失败也需要将标志标记为可提交状态
layer.close(loading);
layer.msg("添加失败", { icon: 5 });
}
});
return false;//只此一句
});
});