zoukankan      html  css  js  c++  java
  • 解决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>



  • 相关阅读:
    枚举
    交房租
    Schtasks 命令详解
    记录自己在 cmd 中执行 jar 文件遇到的一些错误
    Java 8 日期时间 API
    Java 8 Optional 类
    Java 8 Stream
    Java 8 默认方法
    Java 8 函数式接口
    Java 8 方法引用
  • 原文地址:https://www.cnblogs.com/xiejava/p/11341778.html
Copyright © 2011-2022 走看看