layui使用官方的表单模块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;
})