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

Question

我的问题是我有一个“分配”对象列表，它们都有一个名为“状态”的字段。状态为真或假，用户可以通过单击特定分配的复选框来选择更改值。

This is what the frontend looks like, each assignment has a checkbox which is its 'status'

我目前的解决方案是这样的：

课程详细信息.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 %}

ajax 代码：

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(){
      }
    });
}

  

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

models.py

class Assignment(models.Model):
    owner = models.ForeignKey(User, on_delete=models.CASCADE)
    title = models.CharField(max_length=100)
    course = models.ForeignKey(Course, on_delete=models.CASCADE, default=None)
    module = models.ForeignKey(Module, on_delete=models.CASCADE)
    deadline = models.DateField()
    assignmentFile = models.FileField(default=None)
    status = models.BooleanField()

此解决方案将工作一次，但一旦用户再次单击复选框，它将不会将信息保存在数据库中。例如，如果用户单击一个最初未重复选中的复选框，则打印语句将是这样的：

True
saving to true
[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

显示正在调用ajax请求，但打印语句应该在真假之间交替。其原因可能是因为第一次将新值保存在数据库中后，显示复选框的页面上的信息没有更新。我该如何解决这个问题？

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}}")'> 将调用具有True 值的ajax 请求。在views.py 中它将执行以下代码块

if status == 'True':
   print("saving to true")
   assignment.status = True

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

2.

但打印语句应该在真假之间交替。造成这种情况的原因可能是显示复选框的页面上的信息没有更新。

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

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

  <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(){

      }
    });
}

现在您将传递复选框的实际值，它的行为应该符合您的预期。