Django：jQuery 触发表单提交 onchange 复选框并保留重新加载时的值

Question

当选中一个或多个复选框时hostform，我想触发表单提交。使用下面的代码可以成功触发此操作。但是，页面会在表单提交时重新加载，从而使任何选中的框立即恢复为未选中状态。我以为localStorage.input这条线可以解决这个问题，但显然不是。有什么建议么？HTML：<div class="container-lg">      <!-- section for checkboxes -->      <div class="row justify-content-center">        <div class="col-6">          <h2>Host</h2>          <form id="hostform" class="form-inline" role="form" action="" method="post">            {% csrf_token %}            <input type="checkbox" class="form-control" id="one" name="hm" value="one" onchange="triggerPost('one')">            <label for="one">One</label>            <br>            <input type="checkbox" class="form-control" id="two" name="hm" value="two" onchange="triggerPost('two')">            <label for="two">Two</label>            <br>          </form>        </div>     ....     </div>jQuery：<script>  function triggerPost(idnum) {        $('#hostform').on("submit", function () {      localStorage.input = $("#"+idnum).checked;    });    $('#hostform').submit()  };</script>

Answer 1

有两种方法可以解决此类问题，通过在 Django 视图中跟踪发布的数据，或者使用 ajax 将数据发送到视图，防止每次发送帖子时重新加载 html 页面和表单。

1. 跟踪发布的数据：

在您看来，您应该通过获取复选框的选中值列表来获取已发布数据中的复选框状态，然后将它们作为上下文数据返回。这取决于您的回复的组织方式，但为了简单起见，我们假设您使用TemplateResponse：

return TemplateResponse(request, 'your.html',{'checked_hms':request.POST.getlist('hm')})

与在 html 中相比，您应该使用条件来检查值是否存在checked_hms并基于checked向复选框输入添加值，如下所示：

...

<input type="checkbox" class="form-control" id="one" name="hm" value="one" {% if 'one' in checked_hms %}checked{% endif %} onchange="triggerPost()">

<label for="one">One</label>

<br>

<input type="checkbox" class="form-control" id="two" name="hm" value="two" {% if 'two' in checked_hms %}checked{% endif %} onchange="triggerPost()">

<label for="two">Two</label>

...

2.使用ajax：

您可以使用 ajax 调用以 post 形式发送表单数据，这不会重新加载表单，从而保持复选框状态完整，如下所示：

<script>

    function triggerPost() {

        $.ajax({

            type: "POST",

            url: $('#hostform').attr('action'),

            data: $('#hostform').serialize()

        });

    };

</script>