首页 > 其他分享 >解决layui表单ajax提交回调函数不起作用问题的两种方式

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

时间:2022-11-01 10:56:22浏览次数:58  
标签:layui submit 表单 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>

 

标签:layui,submit,表单,ajax,提交,按钮
From: https://www.cnblogs.com/tangfei/p/16846970.html

相关文章

  • Vue 中的 Ajax
    1.1使用代理服务器1.1.1方式一在vue.config.js中添加如下配置:devServer:{proxy:"http://localhost:5000"}说明:优点:配置简单,请求资源时直接发给前端(8080)即可......
  • 使用Vue框架修改表单数据回显失败的一种情况
    今天在完成项目的某个模块的修改业务时,数据没有回显在表单里js文件constdefaultForm={processNo:'',name:'',reasons:'',overtimeStart:'',overti......
  • html-表单
    <!--form定义表单域,将其范围内的表单元素提交给服务器--><formaction="demo.php"method="get">  <h3>表单元素</h3>  <h2>input</h2>  <!--text文本......
  • day22 ajax
    概述:AJAX(asynchronousJavaScriptandxml)异步的Javascript和xml。用于发送http请求(可以是异步请求),能够完成页面的局部刷新功能,在整个页面不刷新的前提下,发送对应的请求......
  • js的ajax
    一些关键词线程(线程和进程的最小单位javascript是单线程的语言())进程(正在运行的程序)同步(一个线程执行(同步阻塞))上一个没有做完下一个不能执行异步(多个线程)......
  • ajax测试wepApi模板
     ajax测试wepApi模板<body><%--<inputid="CreditValueInput"/>--%><buttonid="SubmitButton">点击跳转</button><formid="form1"runat="server">......
  • 宜搭自定义表单中的表格,添加数据源变量
    在数据源处添加的变量是全局变量,可以作为中间值完成后台和前端的数据传递。具体:通过添加“远程变量”,获得后台数据赋值给全局变量用“:”,键和值的格式,表格组件添加数据源来......
  • gin表单验证
    一.表单验证的初始化1.定义forms验证在forms目录下创建user.go文件增加验证的struct内容packageformstypePassWordLoginFormstruct{ Mobilestring`form:......
  • SpringBoot整合layUI,建议收藏,不然找不到了
    layUI是一款非常受欢迎的前端框架,有着极其丰富的组件。官网:https://www.layui.com/doc/SpringBoot整合layUI,其实就是模板引擎去整合layUI,模板引擎一般我们用jsp,或者thymelea......
  • c# 模拟表单提交,post form 上传文件、大数据内容
    表单提交协议规定:要先将HTTP要求的Content-Type设为multipart/form-data,而且要设定一个boundary参数,这个参数是由应用程序自行产生,它会用来识别每一份资料的边界......