python + layui.form 表单提交

我的设计是点击按钮弹出表单所在的弹出层
点击弹出层的按钮:

<button class="layui-btn" id="add_btn"><i class="layui-icon">&#xe654;</i>添加数据</button>

弹出层表单代码:

<div id="add_form" style="display: none;margin-right: 10px;">
    <form class="layui-form" style="margin-top: 10px" lay-filter="example">
        <div class="layui-form-item">
            <label class="layui-form-label">输入框</label>
            <div class="layui-input-block">
                <input type="text" name="title" placeholder="请输入标题" required lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">下拉选择框</label>
            <div class="layui-input-block">
                <select name="interest" lay-filter="aihao">
                    <option value="0">写作</option>
                    <option value="1">阅读</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">复选框</label>
            <div class="layui-input-block">
                <input type="checkbox" name="like_sing" title="唱歌">
                <input type="checkbox" name="like_dance" title="舞蹈">
                <input type="checkbox" name="like_game" title="游戏">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">开关关</label>
            <div class="layui-input-block">
                <input type="checkbox" lay-skin="switch" name="switch1">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">开关开</label>
            <div class="layui-input-block">
                <input type="checkbox" checked lay-skin="switch" name="switch2">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="0" title="男">
                <input type="radio" name="sex" value="1" title="女" checked>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">请填写描述</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" class="layui-textarea" name="desc"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="submit_form">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

js:

layui.use(['layer','form'], function(){
    var $=layui.jquery,layer=layui.layer,form=layui.form;
    $('#add_btn').click( function(){
        var index = layer.open({
            title: '导入文件',
            type: 1,
            shade: 0.4, ////遮罩透明度
            area: ['600px', '350px'],
            content:$('#add_form'),
            success:function(){
                form.on('submit(submit_form)', function(data){
                    var form_data = {form_data:JSON.stringify(form.val('example'))} //获取表单那数据
                    console.log(form_data);
                    $.ajax({
                        url:'/add_form/',
                        method:'post',
                        data:form_data,
                        dataType:'JSON',
                        success:function (result) {
                            if (result.code===0){
                                layer.close(index);
                                layer.msg(result.msg,{icon: 6});
                            }else {
                                layer.msg(result.msg,{icon: 5});
                            }
                        }
                    })
                    return false;
                });
            }
        })
    })
})
posted @ 2021-09-02 17:48  、阿红吖  阅读(684)  评论(0编辑  收藏  举报