Djang+layui+ajax 提交表单实例

最新推荐文章于 2024-06-21 10:00:32 发布

ladyfive

最新推荐文章于 2024-06-21 10:00:32 发布

阅读量907

点赞数

分类专栏： python 文章标签： ajax layui javascript

本文链接：https://blog.csdn.net/ladyfive/article/details/127105257

版权

python 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

案例

第一步：导入layui+ajax的js文件以及css文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}自动化测试平台{% endblock %}</title>
    <meta name="format-detection" content="telephone=no">
    {#引入layui.css#}
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>
{#引入layui.js#}
<script src="/static/layui/layui.js"></script>
<script src="/static/autotest/js/jquery-1.6.4.min.js"></script>
</body>
</html>

第二步：编写表单

action=“”
method=“post”
button控件必须包含lay-submit=“” lay-filter=""两个公用属性

    <form action="" method="post" class="layui-form" target="">
        {#    <form action="" class="layui-form">#}
        {% csrf_token %}
        <div id="add_project">
            <div class="layui-form-item">
                <label class="layui-form-label">产品名称</label>
                <div class="layui-input-inline">
                    <input type="text" id="pro_name" name="pro_name" required placeholder="请输入" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">产品别名</label>
                <div class="layui-input-inline">
                    <input type="text" id="pro_en_name" name="pro_en_name" required placeholder="请输入" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">产品说明</label>
                <div class="layui-input-block">
                    <textarea id="pro_remark" name="pro_remark" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    {#                    <input type="submit" lay-submit="" lay-filter="add-project" class="layui-btn layui-btn-normal" value="保存">#}
                    <button type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="add-project">保存
                    </button>
                </div>

            </div>
        </div>
        {% if alert_msg %}
            <p><strong>提示信息：{{ alert_msg }}</strong></p>&nbsp;
        {% endif %}
    </form>

第三步：编写接口

@csrf_exempt
def add_project(request):
    arg = {"status": "ok", "msg": None}
    pro_obj = ProjectManage()
    try:
        if request.is_ajax():
            print(request.POST)
            pro_name = request.POST['pro_name']
            pro_en_name = request.POST['pro_en_name']
            pro_remark = request.POST['pro_remark']
            msg = pro_obj.func_add_project(pro_name, pro_en_name, pro_remark)
            arg['state'] = msg
            # return redirect('autotest:project_list')
            return JsonResponse(arg)
        else:
            return render(request,'add_project.html')
    except Exception as e:
        arg['code'] = "error"
        arg['msg'] = e
        return JsonResponse(arg)

第四步：编写form表单的js

    <script>

        layui.use(['form', 'layedit', 'laydate'], function () {
            var form = layui.form
                , layer = layui.layer
                , layedit = layui.layedit
                , laydate = layui.laydate;
            {#alert("test");#}

            // 登录过期的时候，跳出ifram框架
            if (top.location != self.location) top.location = self.location;
            form.render();
            form.on('submit(add-project)', function (data) {
                data = data.field;

                {#alert("test");#}
                var pro_name = data["pro_name"];
                console.log(pro_name);
                var pro_en_name = $("#pro_en_name").val();
                var pro_remark = $("#pro_remark").val();

                const csrftoken = getCookie('csrftoken');
                console.log(data);
                if (pro_name == " ") {
                    layer.msg("产品名称不能为空");
                    return false;
                }
                if (pro_en_name == "") {
                    layer.msg("产品英文名称不能为空");
                    return false;
                }
                var request_data = {"pro_name": pro_name, "pro_en_name": pro_en_name, "pro_remark": pro_remark};
                $.ajax({
                    cache: false,
                    data: request_data,
                    {#dataType: "json",#}
                    type: "POST",
                    {#method: "POST",#}
                    async: true,
                    headers: {"X-CSRFTOKEN": csrftoken},
                    url: "{% url 'autotest:add_project' %}",
                    {#contentType: "application/json",#}
                    success: function (arg) {
                        console.log(arg);
                        status = arg.status;
                        console.log(status);
                        if (arg.status == 'ok') {
                            layer.msg('保存成功');
                            window.location.replace('{% url 'autotest:project_list' %}');
                        } else {
                            layer.msg("提示信息:", arg.errmsg);
                        }
                    },
                    error: function (arg) {
                        layui.msg("提示信息:", arg);
                    }
                });
                return false;
            });

        })
    </script>

问题分析

（1） ajax未执行
由于没有导入jquery.js文件导致的<script src="/static/autotest/js/jquery-1.6.4.min.js"></script>
（2）会同时发送一个post请求和get请求
由于form表单没有设置method=“post” ,以及action不为空
（3）ajax回调函数获取不到响应数据
django编写的接口的返回的数据格式不正确导致