layui.form.on里面提交表单时，里面的form表单提交了两次

最新推荐文章于 2024-06-30 01:25:09 发布

A_under_taker

最新推荐文章于 2024-06-30 01:25:09 发布

阅读量1.5k

点赞数 1

分类专栏： Java学习文章标签： javascript layui

本文链接：https://blog.csdn.net/A_under_taker/article/details/116803136

版权

Java学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在使用layui框架时遇到一个表单提交通过ajax发送请求时意外触发两次的问题，导致数据库中出现重复数据。经过调试发现，尽管只引用了一次layui.js，但表单提交仍然被执行了两次。解决方案是注释掉特定代码段，从而避免了重复提交。问题的根源尚不清楚，但这一临时措施成功解决了数据重复的问题。

摘要由CSDN通过智能技术生成

有一些人，他还活着，可是他已经死了。----鲁迅没说过

问题

在学习的过程中，遇到了一个问题，layui的form表单在ajax提交的时候执行了两次。导致的最直观的后果就是数据重复，每次保存的内容，都会在数据库中存两条，偶尔还会多一条

关键代码如下

layui.form.on('submit(addSubmit)', function (data) {

    $.ajax({
        url: data.form.action
        , async: false//同步
        , type: 'POST'
        , contentType: 'application/json;charset=utf-8'
        , data: JSON.stringify(data.field)
        , success: function (res) {
            if (res.code == 0) {
                layer.closeAll();//关闭弹出层
                query();
            } else {
                layer.alert(res, msg);
            }
        }
    });

    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});

发现数据重复后，调试了一下js的代码，发现return false之后再一次执行了ajax

查了一些资料和回答，发现是引用layui.js的问题

但是我只引用了一次，网上其他回答几乎都是发现了自己人为重复引用layui.js

问题原因暂时未知，代码图如下：(PS:如果有小伙伴知道原因的，也可以在评论区告知，哈哈。)