Javascript Django:jQuery触发表单submit onchange of复选框，并在重新加载时保留值

当选中

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>

<script>
  function triggerPost(idnum) {
    
    $('#hostform').on("submit", function () {
      localStorage.input = $("#"+idnum).checked;
    });
    $('#hostform').submit()
  };
</script>

主办
{%csrf_令牌%}
一个


两个


....

jQuery:

<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>

<script>
  function triggerPost(idnum) {
    
    $('#hostform').on("submit", function () {
      localStorage.input = $("#"+idnum).checked;
    });
    $('#hostform').submit()
  };
</script>

函数triggerPost（idnum）{
$（'#hostform'）。在（“提交”上，函数（）{
localStorage.input=$（“#”+idnum）。选中；
});
$（'#hostform'）。提交（）
};

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

1。跟踪已发布的数据：

<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>

<script>
  function triggerPost(idnum) {
    
    $('#hostform').on("submit", function () {
      localStorage.input = $("#"+idnum).checked;
    });
    $('#hostform').submit()
  };
</script>

在您的视图中，您应该通过获取复选框的选中值列表，然后将它们作为上下文数据返回，从而在发布的数据中获取复选框状态。这取决于您的响应是如何组织的，但为了简单起见，让我们假设您使用

TemplateResponse

：

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

而在html中，您应该使用条件检查

checked\u 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>
...

<script>
    function triggerPost() {
        $.ajax({
            type: "POST",
            url: $('#hostform').attr('action'),
            data: $('#hostform').serialize()
        });
    };
</script>

。。。
一个


两个
...

2。使用ajax:

<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>

<script>
  function triggerPost(idnum) {
    
    $('#hostform').on("submit", function () {
      localStorage.input = $("#"+idnum).checked;
    });
    $('#hostform').submit()
  };
</script>

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

...
<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>
...

<script>
    function triggerPost() {
        $.ajax({
            type: "POST",
            url: $('#hostform').attr('action'),
            data: $('#hostform').serialize()
        });
    };
</script>

函数triggerPost（）{
$.ajax({
类型：“POST”，
url:$（'#hostform'）.attr（'action'），
数据：$（'#hostform'）。序列化（）
});
};

按照建议使用ajax非常有效！谢谢