最近想用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. rest framework-序列化-长期维护

    ###############   表结构    ############### from django.db import models class Book(models.Model): titl ...

  2. pycharm打印出的汉字显示乱码

    pycharm未配置时,默认配置为: 打印汉字时显示乱码 简单设置即可 这下以后就没有问题了.

  3. Redis为什么会比MySQL快?

    1.Redis是基于内存存储的,MySQL是基于磁盘存储的 2.Redis存储的是k-v格式的数据.时间复杂度是O(1),常数阶,而MySQL引擎的底层实现是B+Tree,时间复杂度是O(logn), ...

  4. 线程、volatile与synchronized、Lock

    目录 线程 1.概念: 2.线程生命周期: 3.线程调度 4.线程实现 4.1.实现方式 4.2.之间的区别: 5.线程安全 5.1.volatile与synchronized 5.1.synchro ...

  5. JVM组成与作用

    class loader 类加载器:加载类文件到内存.Class loader只管加载,只要符合文件结构就加载,至于能否运行,它不负责,那是有Exectution Engine 负责的.exectio ...

  6. LG_3459_[POI2007]MEG-Megalopolis

    题目描述 Byteotia has been eventually touched by globalisation, and so has Byteasar the Postman, who onc ...

  7. montagy

    因为只是想分享ghcjs和webgl的使用经验,所以很多地方说的很粗,因为涉及的知识确实很多, 推荐两本书,一本haskell基础的 learn you a haskell for great goo ...

  8. Floyd算法-dp问题

    求结点对之间有负数的距离.限制条件:不允许有包含负权值的边组成的回路. 例子: 1.初始化 其中distance矩阵表示i,j两结点之间的距离. path矩阵,以第一行为例,表示0->0值为n表 ...

  9. drf中的jwt使用与手动签发效验

    jwt认证 1)session存储token,需要数据库参与,耗服务器资源.低效 2)缓存存token,需要缓存参与,高效,不易集群 3)客户端存token,服务器存签发与交易token的算法,高效, ...

  10. (六)mybatis-spring集成完整版

    mybatis-spring集成完整版 一.项目整体 mybatis接口层.mapper层 Service层 Test调用测试 二.自动生成代码-mybatis generator 主要修改: 接口. ...