最近想用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提交回调函数不起作用问题的两种方式的更多相关文章

  1. [Android]解决3gwap联网失败:联网请求在设置代理与直连两种方式的切换

    [Android]解决3gwap联网失败:联网请求在设置代理与直连两种方式的切换 问题现象: 碰到一个问题,UI交互表现为:联通号码在3gwap网络环境下资源一直无法下载成功. 查看Log日志,打印出 ...

  2. JavaWeb学习总结(十一):Session解决form表单重复提交

    在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提 ...

  3. 【前台 ajax】web项目前台传递数组给后台 两种方式

    项目使用maven    springMVC 有需求 将前台的数组   在ajax中 送给后台 方式1: 前台代码:[注意:ajax中的属性---traditional:true,  ] 如果Post ...

  4. 织梦自定义表单ajax提交范例

    function add_ajaxmessage(){ var dh = document.getElementById("tel"); //表单验证 if($("#te ...

  5. 表单提交时上传图片 表单ajax提交

    页面 <script type="text/javascript" src="js/jquery.form.js"></script>& ...

  6. form表单ajax提交

    这里下面有两种  第一种是form表单里面添加了数据,并且含有上传的图片,第二种是from表单中不含有图片  只有普通数据 第一种form表单中包含有图片的类型: <form method=&q ...

  7. django种表单post出现CSRF verification failed( CSRF验证失败 ) 的两种解决方式

    现象 表单界面例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc29sbG9yNTI1/font/5a6L5L2T/fontsize/400/fi ...

  8. 解决mybatis中 数据库column 和 类的属性名property 不一致的两种方式

    解决方式way1:resultMap (1)studentMapper.xml <!-- 当数据库的字段名 和 类的属性名 不一致的时候的解决方式:2种 way1--> <selec ...

  9. java web解决表单重复提交问题

    我们大家再进行web开发的时候,必不可少会遇见表单重复提交问题.今天就来给总结如何解决表单提交问题,欢迎大家交流指正. 首先我们在讨论如何解决表单重复提交问题之前先来解决三个问题:1.什么叫表单重复提 ...

随机推荐

  1. 系统学习Javaweb6----JavaScript2

    感想:感觉自己还是只是学到皮毛,仍需继续努力,明天开始需要学习Android和阅读感想的书写. 学习笔记: 2.3.运算符 JavaScript运算符与java运算符基本一致. 这里我们来寻找不同点进 ...

  2. zcat|subprocess.check_all|subprocess.Popen|gzip|readline()

    #!/usr/bin/python from subprocess import check_call import subprocess import gzip ''' $ zcat 160121_ ...

  3. python学习笔记(12)常用模块

    一.模块.包 什么是模块? 模块实质上就是一个python文件,它是用来组织代码的,意思就是说把python代码写到里面,文件名就是模块的名称,test.py test就是模块名称. 什么是包? 包, ...

  4. Struts2加载自定义库注意事项

    新建Struts2项目,添加Struts2的jar包时,往往通过导入自定义库的方式,导入自定义库时,有个地方必须要设置,否则项目无法正常执行,如图所示: 必须要按照上述方式对自定义库进行加载!

  5. [LC] 76. Minimum Window Substring

    Given a string S and a string T, find the minimum window in S which will contain all the characters ...

  6. 函数动态参数和Python中的三种空间

    动态参数 : *args 实参角度: 定义一个函数时, * 将所有的位置参数聚合到一个元祖中 顺序 : 位置参数 > * args > 默认参数 > **kwargs 接受所有参数 ...

  7. Invalid action class configuration that references an unknown class问题原因之s:select

    早先做个练习项目就出现了这个错误,各种查资料,然后各种尝试,依然没有解决,不过可以确定是前台页面导致的. 今天又碰到了这个问题,头疼啊!不能再略过了,使用最笨的方法,一个模块一个模块的排除.先看下我的 ...

  8. elasticsearch用法

    基本原理 搜索引擎的索引 倒排序 由value查找key 数据库的索引 由key查找value 用于解决分库分表后的排序分页 like查找 性能问题 日志库的全文搜索 spring集成时使用的不是re ...

  9. [LC] 7. Reverse Integer

    Given a 32-bit signed integer, reverse digits of an integer. Example 1: Input: 123 Output: 321 Examp ...

  10. 为什么前两年大热的VR创业突然冷了?

    不得不说,如果不是<头号玩家>在国内的热映,人们似乎都要忘记VR这个行业了.<头号玩家>中那些带有极强真实色彩的游戏,其实就是VR进化的目标,甚至是巅峰!而里面的角色佩戴的设备 ...