解决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.什么叫表单重复提 ...
随机推荐
- AJAX数据传输(原生js)
原生ajax写法 <!DOCTYPE html> <html lang=""> <head> <meta charset="UT ...
- CentOS-SendMail服务
title date tags layout music-id CentOS6.5 SendMail服务安装与配置 2018-09-04 Centos6.5服务器搭建 post 456272749 一 ...
- http请求头缓存实现
转自CSDN ouyang-web之路 原文链接:https://blog.csdn.net/cangqiong_xiamen/article/details/90405555 一.浏览器的缓存 st ...
- 线程同步Lock锁
Lock接口历史 java1.5版本之前只有synchronized一种锁,lock是java1.5版本之后提供的接口.lock接口与synchronized接口功能相同,但是需要手动获取锁和释放锁. ...
- [LC] 240. Search a 2D Matrix II
Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...
- Protein interaction|insight QUANTA|SYBYL COMPOSER|MODELLER|SWISS_MODEL|WHAT IF|3D-JIGSAW|CPH-ModelGPCRs|Membrane protein|
生命组学 蛋白质之间的互作可以有以下应用: Eg:改变蛋白质基因,从而组改变结构,削弱蛋白质之间的相互作用. Eg:数据模拟出蛋白质的靶点,即结合腔,将此数据存入结合化合物的dataset,用于制药 ...
- hadoop配置文件详解、安装及相关操作补充版
一. Hadoop伪分布配置 首先应该现在profile文件添加hadoop_home操作如下: export JAVA_HOME=/usr/java/jdk expor ...
- oracle12c 可行的解决办法:ORA-01017: invalid username/password; logon denied
开启服务OracleServiceORCL和OracleOraDB12Home1TNSListener用Oracle SQL developer 连接测试报错:ORA-01017: invalid u ...
- Apache虚拟机的配置文件解说
1.为了方便管理虚拟主机,我决定使用一种方法,那就是修改httpd-vhosts.conf文件. 第一步首先要使扩展文件httpd-vhosts.conf生效: 1. 打开 apache/conf/h ...
- Image图片
# View more python tutorials on my Youtube and Youku channel!!! # Youtube video tutorial: https://ww ...