layui 表单提交不执行ajax的坑

在官方文档2.x里面写的layui Form提交示例，form.on事件获取表单对应的json信息，然后自己ajax提交表单，

但是总是提交失败，一开始以为获取到json信息之后的那个return false已经无用了。没想到就这个return 坑了我好一会。

如果要提交ajax请求必须要在form.on事件的结尾加上return false。 记录一下，下面是代码。

这个页面的前提是引入了相关的css和js

"stylesheet" href="jqueryplugin/layer/src/layui.css">
"stylesheet" href="jqueryplugin/layui/src/css/layui.css">

layer和layui两个都引入了，然后表单的最后给的一个按钮事件

class="layui-form-item">
            
class="layui-input-block">
                class="layui-btn" lay-submit lay-filter="updateUser">修改
            
        

 下面是js

layui.use('form', function() {
            var form = layui.form;

            //自定义验证规则
            form.verify({
                userName : function(value) {
                    if (value.length < 2||value.length>6) {
                        return '请写正确填写姓名';
                    }
                },
                pass : [ /(.+){6,12}$/, '密码必须6到12位' ],
//                 money : [ /^\d+\.\b\d{2}\b$/, '金额必须为小数保留两位' ]
            });

            //监听提交
            form.on('submit(updateUser)', function(data) {
                console.log(typeof data);
                console.log(data.field);
//                 return false;                
                $.ajax({
                    contentType : "application/x-www-form-urlencoded; charset=utf-8",
                    type : "post",
                    url : htmlVal.htmlUrl + "?doEditUser=",
                    data : data.field,
                    dataType:'json',
                    success : function(res) {
                        isTimeOut(res);
                        if (res.errorCode == '0') {
                            layer.alert('更改成功', function(index) {
                                location.reload();
                                layer.close(index);
                            })
                        }
                        if (res.errorCode == 'loginName') {
                            layer.alert('登录名已存在！', function(index) {
                                layer.close(index);
                                return false;
                            })
                        }
                        if (res.errorCode == 'email') {
                            layer.alert('email已存在！', function(index) {
                                layer.close(index);
                                return false;
                            })
                        }
                        if (res.errorCode == 'cellphone') {
                            layer.alert('手机号码已存在！', function(index) {
                                layer.close(index);
                                return false;
                            })
                        }
                        if (res.errorCode == 'wrong_email') {
                            layer.alert('email格式错误！', function(index) {
                                layer.close(index);
                                return false;
                            })
                        }
                        if (res.errorCode == 'wrong_cellphone') {
                            layer.alert('手机号码格式错误！', function(index) {
                                layer.close(index);
                                return false;
                            })
                        }
                    }
                });
                //这个return非常重要，防止ajax跳转，去掉的话就不经过ajax了
                return false;
            });

        });

 

转载于:https://www.cnblogs.com/dayu007/p/9528290.html