解决layui表单ajax提交回调函数不起作用问题的两种方式

最近想用layui开发一个论坛模板用的是fly-ui，才接触layui对其还不太熟悉。一个简单的登录就困扰了我很久。登录的form通过ajax提交回调函数老是不起作用。

经过浪费了N多时间的调试，发现layui的button默认就是submit提交。所以在ajax提交的时候同时进行了submit的表单提交。因为ajax是异步的，所以在回调函数还没有来得及执行，submit把表单页面提交了，所以回调函数老是不起作用。后台还有可能报不支持的post请求。因为通过submit把表单又提交了一次。搞清楚原因以后，解决这个问题的思路就很清楚了。就是不能让表单即用ajax处理又通过submit提交。

解决方案一、不用layui的submit按钮，把按钮定义成普通的button,通过调用ajax的方式提交。

解决方案二、用layui的submit按钮，在执行了ajax请求后通过return false直接终止（非常关键！）不让再submit了。

 

代码如下：

表单如下：

<form id="loginForm">

<div class="layui-form-item">

<label for="L_email" class="layui-form-label">用户名</label>

<div class="layui-input-inline">

<input type="text" id="L_username" name="username" required lay-verify="required" autocomplete="off" class="layui-input">

</div>

</div>

<div class="layui-form-item">

<label for="L_pass" class="layui-form-label">密码</label>

<div class="layui-input-inline">

<input type="password" id="L_pass" name="password" required lay-verify="required" autocomplete="off" class="layui-input">

</div>

</div>

<div class="layui-form-item">

<button class="layui-btn" lay-filter="*" lay-submit>立即登录</button>

</div>

</form>

 

方案一

将layui的提交按钮改成普通的按钮通过显示申明type="button"定义按钮为普通的按钮。

<button class="layui-btn" type="button"  οnclick="javascript:login()" >立即登录</button>

<script>

function login() {

$.post(ctx + "bbs/login", {

"username" : $("input[name='username']").val(),

"password" : $("input[name='password']").val(),

"rememberMe" : 0

}, function(data) {

alert(JSON.stringify(data));

});

}

</script>

方案二

提交按钮还是layui的默认按钮，lay-submit默认是submit的提交按钮会触发表单的提交。

<button class="layui-btn" lay-filter="bbsLogin" lay-submit>立即登录</button>

<script>

//表单

layui.use('form', function() {

var form = layui.form;

//监听提交

form.on('submit(bbsLogin)', function(data) {

$.post(ctx + "bbs/login", {

"username" : data.field.username,

"password" : data.field.password,

"rememberMe" : 0

}, function(data) {

alert(JSON.stringify(data));

});

return false; //非常关键，否则回调不起作用

});

});

</script>