layui表单提交使用form.on('submit(sub)',function (){}) 使用ajax请求时回调不执行的原因及解决方法
ayui使用官方的表单模块form.on('submit(sub)',function (){}) 提交，使用ajax请求向后台请求一个执行结果，根据结果进行处理，出现回调无法执行，并且页面出现了刷新
之前也遇到过这个问题，直接使用将form标签修改成了div，通过jquery为提交按钮添加点击事件，而不用submit提交表单。
今天在为毕设添加修改密码的功能的时候，再次遇到了这个问题，刚好有点空闲，决定找出真正的原因。
首先，debug服务端逻辑，发现能正常取值，返回值也是正常
之后，检查ajax请求的 dataType是没问题的，我在服务端返回了一个字符串，我也指定了text属性。
百度（面向百度编程）之后发现原因是当button的type为submit的使用，页面会自动刷新，而我们并不希望他刷新。
参考链接：https://blog.csdn.net/laukitto/article/details/69230348
既然知道了原因，那么问题就好解决了，只要在submit方法的最后添加个 return false就解决了
下面是请求的JS代码，最后一行添加 return false 问题解决
form.on('submit(sub)',function (){
var newpwd = $('#newpwd').val();
var confirmpwd = $('#confirmpwd').val();
if(newpwd != confirmpwd){
$('#rcp').attr('hidden','hidden');
$('#ecp').removeAttr('hidden');
layer.msg("两次输入密码不一致");
return false;
}else{
var data = {
originPwd:$('#originpwd').val(),
newPwd:$('#newpwd').val()
}
$.ajax({
url:'/user/changePwd',
type:'post',
dataType:'text',
contentType: 'application/json',
data:JSON.stringify(data),
timeout:2000,
beforeSend:function (xhr) {
xhr.setRequestHeader(header,token);
},
success:function(data){
console.log(data);
if(data == 'success'){
layer.msg("密码修改成功");
location.href = "/user/loginpage"
}else{
layer.msg("密码修改失败")
}
},
error:function () {
layer.msg("密码修改失败")
}
})
}
return false;
})
---------------------------------------xadmin中弹出页面，异步提交被关闭---------------------------------------------------------------------------
form.on('submit(add)', function(data){
//console.log(data);
//发异步，把数据提交给php
$.ajax({
type:'post',
url:"{:url('admin/AdminRole/save')}",
data:{username:1,password:2},
success:function (res) {
if(res.status == 200){
layer.alert(res.msg, {icon: 6},function () {
// 获得frame索引
var index = parent.layer.getFrameIndex(window.name);
//关闭当前frame
parent.layer.close(index);
});
}else{
layer.alert(res.msg, {icon: 6},function () {
// 获得frame索引
var index = parent.layer.getFrameIndex(window.name);
//关闭当前frame
parent.layer.close(index);
});
}
}
});
return false;
});