django - layer弹层中添加form表单的实现方式（有坑）

一、展示方式

1、比如说我们在测试平台中加一个添加项目的功能，统共就两输入框，如果跳转到一个页面完成，会显得比较笨重，于是，我们可以运用弹层

 

二、具体实现方式如下

1、先定义这个添加项目的表单，表单的样式根据你使用的前端框架来决定，但一定要注意两点

（1）不要赤果果的直接把表单呼上去，要在外面再套一层div，我把他放到一个行里

（2） 要将他的可见性，设成display：none，即将其隐藏，因为我们是想给他展示在layer弹层里，而不是层示在页面上

 2、js脚本

（1）layer中添加表单，这里面有一个坑

layer中的form表单，在post请求时，获取不到数据，是因为这个地方，你要写form表单上层的div

 

 

 （2）提交表单：走正常的ajax的post请求就可以

 layui.use('form', function () {
            form = layui.form;
            form.on('submit(btn-submit-project)', function (data) {
                console.log(data.field)
                $.ajax({
                    type: "POST",
                    url: add_project_url,
                    contentType: "application/json",
                    dataType: "json",
                    data: JSON.stringify({
                        "project_name": data.field.project_name,
                        "project_summary": data.field.project_summary
                    }),
                    success: function (result) {
                        if (result.error_code == 0) {
                            layer.msg(result.msg, {time: 3000}, function () {
                                window.location.reload()
                            });
                        } else {
                            layer.msg(result.msg, {time: 3000})
                        }
                    },
                    error: function () {
                        alert("提交失败");
                    }
                });
                return false;
            });
        });