如何在 Django 环境中仅刷新包含表单的子页面答案

【问题标题】：How can I refresh only the child page that contains a form in Django environment如何在 Django 环境中仅刷新包含表单的子页面
【发布时间】：2020-05-04 13:45:41
【问题描述】：

我一直在处理 Django 表单。该表单位于 poc_add.html 站点中。 index.html 端包含

<div id="output"></div>

正在填写 poc_add.html 内容。换句话说，poc_add.html 站点是 index.html 站点的一部分。

这是表单的代码：

<form class="form">
            {% csrf_token %}
                    <fieldset>
                        <label class="mb-0" for="cmbLocation">Location</label>
                        <div style="padding-bottom: 15px;" class="row mb-1">
                            <div class="col-lg-12">
                                <select class="form-control" id="cmbLocation">
                                    {% for location in locations %}
                                        <option value="{{ location.0 }}">{{ location.1 }}</option>
                                    {% endfor %}
                                 </select>
                            </div>
                        </div>

                        <label class="mb-0" for="cmbCertification">Certification</label>
                        <div style="padding-bottom: 15px;" class="row mb-1">
                            <div class="col-lg-12">
                                <select class="form-control" id="cmbCertification">
                                     <option>Lead Prep</option>
                                     <option>Greeter</option>
                                     <option>Lead Trainer</option>
                                 </select>
                            </div>
                        </div>

......

......
<div id="divAddNewPOC" style="padding-bottom: 10px;padding-left: 2px;">
    <button class="btn btn-primary custom-btn" id="btnNewPOC" data-dismiss="modal">Save</button>
</div>

</fieldset>

</form>

这是 poc_add.html 页面中包含的 poc.js 文件的一些 JavaScript 代码。

$("#btnNewPOC").click(function(){
    var selectedLocationVal = $("#cmbLocation").val();
    var selectedCertificationVal = $("#cmbCertification").val();

    console.log("Location val: " + selectedLocationVal);
    console.log("Current Objective val: " + selectedCurrentObjVal);
    console.log("Correct Uniform val: " + selectedCorrectUniformVal);

    $.post("poc_form_submit",{'location': selectedLocationVal,
                            'certification': selectedCertificationVal,
                            ......
                            ......
                            ......
                            },
        function(data) {
            .....
            .....
            .....
    }, "html");
});

这是 urls.py 文件的一部分

urlpatterns = [
    path('', views.login, name='login'),
    path('index', views.index, name='index'),
    ....
    ....
    ....
    path('poc_form_submit', views.poc_form_submit, name='poc_form_submit'),

]

当我单击提交按钮时，它会刷新 index.html 站点。我需要的是只刷新 poc_add.html 页面。我怎样才能做到这一点？

【问题讨论】：

标签： html django python-3.x forms django-forms

【解决方案1】：

您的视图必须返回呈现的 poc_add.html

比：




    $("#btnNewPOC").click(function(){
            var selectedLocationVal = $("#cmbLocation").val();
            var selectedCertificationVal = $("#cmbCertification").val();

            console.log("Location val: " + selectedLocationVal);
            console.log("Current Objective val: " + selectedCurrentObjVal);
            console.log("Correct Uniform val: " + selectedCorrectUniformVal);

            $.post("poc_form_submit",
                    {'location': selectedLocationVal,
                     'certification': selectedCertificationVal,
                     ......
                     ......
                     ......},
                function(data) {
                    // Rendered poc_add.html from your view
                    $("#output").html(data);
                }
            );
        });

【讨论】：