解決layui表單ajax提交回調函數不起作用問題的兩種方式
最近想用layui開發(fā)一個論壇模板用的是fly-ui，才接觸layui對其還不太熟悉。一個簡單的登錄就困擾了我很久。登錄的form通過ajax提交回調函數老是不起作用。
經過浪費了N多時間的調試，發(fā)現layui的button默認就是submit提交。所以在ajax提交的時候同時進行了submit的表單提交。因為ajax是異步的，所以在回調函數還沒有來得及執(zhí)行，submit把表單頁面提交了，所以回調函數老是不起作用。后臺還有可能報不支持的post請求。因為通過submit把表單又提交了一次。搞清楚原因以后，解決這個問題的思路就很清楚了。
就是不能讓表單即用ajax處理又通過submit提交。
解決方案一、不用layui的submit按鈕，把按鈕定義成普通的button,通過調用ajax的方式提交。
解決方案二、用layui的submit按鈕，在執(zhí)行了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的提交按鈕會觸發(fā)表單的提交。在ajax方法后面通過return false直接終止（非常關鍵！）不讓再submit
<button class="layui-btn" lay-filter="bbsLogin" lay-submit>立即登錄</button>
<script>
//表單
layui.use('form', function () {
var form = layui.form;
//監(jiān)聽提交
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>
浙公網安備 33010602011771號