解决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>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Ollama——大语言模型本地部署的极速利器
· 使用C#创建一个MCP客户端
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· ollama系列1:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现