将复选框输入保存到数据库并更新页面

Question

我的问题是我有一个“分配”对象列表，它们都有一个名为“状态”的字段。状态为 true 或 false，用户可以通过单击特定分配的复选框来选择更改值。这就是前端的样子，每个作业都有一个复选框，这是它的“状态”我目前的解决方案是这样的：课程详情.html：{% for assignment in assignments %}<tr>  <td scope="row" style="text-align: center">    <form>    {% csrf_token %}      {% if assignment.status %}        <input type="checkbox" checked onclick='assignmentFinish("False","{{assignment.id}}")'>      {% else %}        <input type="checkbox" onclick='assignmentFinish("True","{{assignment.id}}")'>      {% endif %}    </form>  </td>  <td><h5><span class="badge badge-{{assignment.module.colour}}">{{assignment.module}}</span></td>  <td><a href="{{ assignment.assigmentFile.url }}">{{assignment.title}}</a></td>    <td>{{assignment.deadline}}</td>  ...</tr>{% endfor %}阿贾克斯代码：function assignmentFinish(value,assignment) {    link = "{% url 'uni:finish-assignment' %}";    $.ajax({      type:'POST',      url: link,      data:{        status: value,        assignmentID: assignment,        csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()      },      success: function(){      }    });}  意见.py：def finishAssignment(request):    # Get the product that user has wished for    assignmentID = request.POST['assignmentID']    status = request.POST['status']    assignment = Assignment.objects.get(pk=assignmentID)    print(status)    if status == 'True':        print("saving to true")        assignment.status = True    else:        print("saving to false")        assignment.status = False    assignment.save()    return HttpResponse('')enter code here它表明正在调用 ajax 请求，但打印语句应该在 true 和 false 之间交替。出现这种情况的原因可能是因为在第一次将新值保存到数据库后，显示复选框的页面上的信息没有更新。我该如何解决？

Answer 1

问题与您如何构建它有关。我会给你关于正在发生的事情和解决方案的建设性反馈。

你提到

1.

例如，如果用户重复单击一个最初未选中的复选框，打印语句将是这样的：

[15/Jul/2020 16:11:51] "POST /uni/finishAssignment HTTP/1.1" 200 0

True

saving to true

[15/Jul/2020 16:11:52] "POST /uni/finishAssignment HTTP/1.1" 200 0

True

saving to true

这是True因为这<input type="checkbox" onclick='assignmentFinish("True","{{assignment.id}}")'>将调用ajax值为 的请求True。在views.py它将执行以下块

if status == 'True':

   print("saving to true")

   assignment.status = True

所以上面显示的打印行为是完全正常的，因为这个块将被重复执行。

2.

但是打印语句应该在 true 和 false 之间交替。出现这种情况的原因可能是显示复选框的页面上的信息未更新。

这是正确的，因为您没有在任何地方更新复选框的值，并且您始终假定值是明确的true和false。

解决方案： 要解决此问题，您需要修改您的js函数，使其将作为element第一个参数和assignment.id第二个参数。在其中，您需要通过使用checkedstatus属性直接获取复选框的值来更新参数。

  <td scope="row" style="text-align: center">

    <form>

    {% csrf_token %}

      {% if assignment.status %}

        <input type="checkbox" checked onclick='assignmentFinish(this,"{{assignment.id}}")'>

      {% else %}

        <input type="checkbox" onclick='assignmentFinish(this,"{{assignment.id}}")'>

      {% endif %}

    </form>

  </td>

function assignmentFinish(element,assignment) {

    link = "{% url 'uni:finish-assignment' %}";

    $.ajax({

      type:'POST',

      url: link,

      data:{

        status: element.checked ,

        assignmentID: assignment,

        csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()

      },

      success: function(){

      }

    });

}

现在您将传递复选框的实际值，它应该按照您期望的方式运行。