解决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>
解决layui表单ajax提交回调函数不起作用问题的两种方式的更多相关文章
- [Android]解决3gwap联网失败:联网请求在设置代理与直连两种方式的切换
[Android]解决3gwap联网失败:联网请求在设置代理与直连两种方式的切换 问题现象: 碰到一个问题,UI交互表现为:联通号码在3gwap网络环境下资源一直无法下载成功. 查看Log日志,打印出 ...
- JavaWeb学习总结(十一):Session解决form表单重复提交
在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提 ...
- 【前台 ajax】web项目前台传递数组给后台 两种方式
项目使用maven springMVC 有需求 将前台的数组 在ajax中 送给后台 方式1: 前台代码:[注意:ajax中的属性---traditional:true, ] 如果Post ...
- 织梦自定义表单ajax提交范例
function add_ajaxmessage(){ var dh = document.getElementById("tel"); //表单验证 if($("#te ...
- 表单提交时上传图片 表单ajax提交
页面 <script type="text/javascript" src="js/jquery.form.js"></script>& ...
- form表单ajax提交
这里下面有两种 第一种是form表单里面添加了数据,并且含有上传的图片,第二种是from表单中不含有图片 只有普通数据 第一种form表单中包含有图片的类型: <form method=&q ...
- django种表单post出现CSRF verification failed( CSRF验证失败 ) 的两种解决方式
现象 表单界面例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29sbG9yNTI1/font/5a6L5L2T/fontsize/400/fi ...
- 解决mybatis中 数据库column 和 类的属性名property 不一致的两种方式
解决方式way1:resultMap (1)studentMapper.xml <!-- 当数据库的字段名 和 类的属性名 不一致的时候的解决方式:2种 way1--> <selec ...
- java web解决表单重复提交问题
我们大家再进行web开发的时候,必不可少会遇见表单重复提交问题.今天就来给总结如何解决表单提交问题,欢迎大家交流指正. 首先我们在讨论如何解决表单重复提交问题之前先来解决三个问题:1.什么叫表单重复提 ...
随机推荐
- pytorch源码解析-动态接口宏
动态库接口定义: gcc: 定义在动态库的显示属性: 作用对象: 函数.变量.模板以及C++类 default: 表示在动态库内可见 hidden: 表示不可见 #define EXPORT __at ...
- VB6制作的自定义ocx控件
下载后,解压缩,有一个TreeviewExplorer.ocx文件 在Excel的开发工具选项卡,点击插入ActiveX控件 VBA窗体,VB6窗体.VB.Net窗体都可以使用这个自定义控件的功能. ...
- Missing separate debuginfos, use: debuginfo-install glibc-2.12-1.212.el6_10.3.x86_64
在使用gdb调试时出现Missing separate debuginfos, use: debuginfo-install glibc-2.12-1.212.el6_10.3.x86_64提示 解决 ...
- 88)PHP,PDOStatement对象
PDOStatement类,称之为PDO语句对象,SQL执行完(处理完)产生的结果对象. fetchColumn(index=) 允许传递参数,表示获得第一条记录的第几个字段的值. 相当于 getOn ...
- [LC] 505. The Maze II
There is a ball in a maze with empty spaces and walls. The ball can go through empty spaces by rolli ...
- Skipping MapperFactoryBean with name 'sysUserMapper' and 'com.buding.system.mapper.SysUserMapper' mapperInterface. Bean already defined with the same name!
前几天整体看了一下SpringBoot的简介,觉得看不如自己动手做,于是动手做一个简单的用户管理.启动的时候遇到了Skipping MapperFactoryBean with name 'sysUs ...
- haproxy笔记之四:配置文件中的关键字参考
3.1 balance balance <algorithm> [ <arguments> ]balance url_param <param> [check_po ...
- python 通过socket实现ssh功能
功能:实现从客户端向服务端发送cmd指令,服务端将结果返回给客户端的功能. #coding:utf-8 '''服务端''' import socket,os server=socket.socket( ...
- 北京VS上海:“活着为了工作”还是“工作为了生活”?
Costco开业你去现场了吗?人口普查似的排队场面对于上海人来说已经不稀奇,毕竟当新鲜的商品或是业态来到中国时,上海常常是第一站.但当Costco的新闻不断发酵的同时,在互联网的角落里也有一群人提出了 ...
- AIDLservice
有三种情况:如果直接使用服务,则没有必要进行绑定,但是如果要使用服务里面的方法,则要进行绑定.具体的启动情况有下: 其中很重要一点:bindService和unbindService是成对出现的. 1 ...