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
    var name = data.field.name;
    var desc = data.field.desc;
    $.ajax({
        type: 'post',
        url: "{:url('admin/AdminRole/save')}",
        data: {name: name,remark:desc},
        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);
                   //刷新页面
                    parent.location.reload();
                });
                 //parent.layer.reload();
               
            } else {
                layer.alert(res.msg, {icon: 5}, function () {
                    // 获得frame索引
                    var index = parent.layer.getFrameIndex(window.name);
                    //关闭当前frame
                    parent.layer.close(index);
                    //刷新页面
                    parent.location.reload();
                });
            }
        }
    });
    return false;
});