解决layui表单提交内容到网址的问题

👁 2020-07-07

如何解决layui表单提交后内容出现在网址上的问题

因为期末了，专业课老师需要同学们自行组队完成项目，我们小组就选择了以基于web软件的开发来构建项目，然后就为了在短时间内快速打造出前端页面，我们选择了layui框架

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。

问题

在使用layui的表单时，发现在点击按钮时，表单内容被传到了网址，没有传给后端，而且回调函数也没有执行，看官方文档时，文档这样说的：

方法一

按钮点击或者表单被执行提交时触发，其中回调函数只有在验证全部通过后才会进入，回调返回三个成员，官方给出的代码是：

    form.on('submit(*)', function(data){
console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});

最重要的是一定要有 return flase

但是我使用过了，js文件中确实是将return false放在了后面，可是对于我的页面来说没有起作用

方法二

我的hmtl代码如下

<form class="layui-form" >
    <div class="layui-form-item">
        <label class="layui-form-label"><i class="layui-icon layui-icon-username"></i></label>
        <div class="layui-input-block">
        <input type="text" name="account" required lay-verify="required" placeholder="请输入用户邮箱/用户名" autocomplete="off" class="layui-input">
        </div>
        </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><i class="layui-icon layui-icon-password"></i></label>
        <div class="layui-input-block">
        <input type="password" name="pwd" required lay-verify="required|password" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>        
     <div class="layui-form-item">
        <div class="layui-form-password">
        <a href="" target="_blank">忘记密码?</a>
                </div>
            </div>                                
        </form>    
    <button class="layui-btn layui-btn-fluid" lay-filter="login" id="login-submit">立即登入</button>

值得注意的一点是，之前我的button按钮是放在form内的，后来将按钮放在了form后面，再来写js发现问题解决了。

js代码如下：

 $("#login-submit").on("click", function(){
    $.ajax({
        url:'',
        type:'post',
        dataType:'json',
        data: "option=login&account=" + $('input[name="account"]').val() + "&pwd=" + $('input[name=pwd]').val(),
        success:function(res){
            //成功登陆时的回调函数
        },
        error:function(){
            //失败时的回调函数
            //用户输入与接口内容不对应，显示文字
            layer.msg("网络繁忙，访问失败");
        },
        complete:function(){
            //关掉loading
            layer.closeAll("loading");
        }
    });
});

本文作者： étoile

本文链接： http://sunnyllxx.github.io/2020/07/07/%E8%A7%A3%E5%86%B3layui%E8%A1%A8%E5%8D%95%E6%8F%90%E4%BA%A4%E5%86%85%E5%AE%B9%E5%88%B0%E7%BD%91%E5%9D%80%E7%9A%84%E9%97%AE%E9%A2%98/

版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！

-------------本文结束感谢您的阅读-------------