解決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" onclick="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的提交按鈕會觸發表單的提交。在ajax方法后面通過return false直接終止（非常關鍵！）不讓再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>