使用layUI提交表单的时候，ajax返回整个html

一开始我的请求路径为page/container/add.html，因为要做进一步的判读，没有使用layUI的lay-submit和action按钮，而是参考官网上做了一个监听提交的，简化后的核心代码如下，采用ajax的get请求提交，但是不管怎么提交都还是返回了add.html这个页面的HTML代码。

layui.use('form', function(){
        var form = layui.form;
        //监听提交
        form.on('submit(container)', function(data){
            var con = {};
            con.length = data.field.length;
            con.width = data.field.width;
            con.height = data.field.height;
            con.weightLimit = data.field.weightLimit;
            $.ajax({
                type:"get",
                url:"/container/generateContainer",
                data:{con:con,boxNum:data.field.boxNum},
                success:function () {
                    layer.msg("success");
                    return false;
                },
                error:function () {
                    alert("error");
                }
            });

        });
    });

如图所示，而没有去请求/container/generateContainer接口。检查多遍url路径是没有问题的。后来看博客提到表单点击提交的时候必然跳转页面，如果表单的action为空也会跳转到自己的页面，即效果为刷新当前页。这是结果。那我就尝试阻止表单的提交按钮触发的提交操作，有提到使用preventDefault();或者return false来阻止表单默认的提交行为。我们看到layUI的官方文档里面是有这么一段代码

//监听提交
  form.on('submit(demo1)', function(data){
    layer.alert(JSON.stringify(data.field), {
      title: '最终的提交信息'
    })
    return false;
  });

里面有return false这么一句，但是这一句放在ajax之前的话，ajax就不会执行了，于是加上preventDefault()这句来阻止表单的默认提交行为

layui.use('form', function(){
        var form = layui.form;
        //监听提交
        form.on('submit(container)', function(data){
            var con = {};
            con.length = data.field.length;
            con.width = data.field.width;
            con.height = data.field.height;
            con.weightLimit = data.field.weightLimit;
            event.preventDefault();
            $.ajax({
                type:"get",
                url:"/container/generateContainer",
                data:{con:con,boxNum:data.field.boxNum},
                success:function () {
                    layer.msg("success");
                    return false;
                },
                error:function () {
                    alert("error");
                }
            });

        });
    });

这时候出现了一个新的问题：$ is not defined

这个问题网上就有比较多的答案了，比如提交表单时出错“$ is not defined”里面提到的

虽然加载了jquery ，但是jquey是加载到layui里面的，要用layui.jquery.ajax({});

1：var $ = null,
2：在layui.use里面 $ = layui.jquery
3：如同上面的两位说的是作用域的问题，如果你需要在其他方法里面用到$就需要这样写
4：尝试自己加载jquery.js 然后在加载layui.js

所以最终的代码为

<script>
    layui.use('form', function(){
        var form = layui.form;
        //监听提交
        form.on('submit(container)', function(data){
            var con = {};
            con.length = data.field.length;
            con.width = data.field.width;
            con.height = data.field.height;
            con.weightLimit = data.field.weightLimit;
            event.preventDefault();
            layui.jquery.ajax({
                type:"get",
                url:"/container/generateContainer",
                data:{con:con,boxNum:data.field.boxNum},
                success:function (msg) {
                    layer.msg("hello");
                    return false;
                },
                error:function () {
                    alert("hello");
                }
            });

        });
    });
</script>

问题得到解决，如果有帮助，欢迎点个赞