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

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 0Truesaving to true[15/Jul/2020 16:11:52] "POST /uni/finishAssignment HTTP/1.1" 200 0Truesaving to true这是True因为这<input type="checkbox" onclick='assignmentFinish("True","{{assignment.id}}")'>将调用ajax值为 的请求True。在views.py它将执行以下块if status == 'True':&nbsp; &nbsp;print("saving to true")&nbsp; &nbsp;assignment.status = True所以上面显示的打印行为是完全正常的，因为这个块将被重复执行。2.但是打印语句应该在 true 和 false 之间交替。出现这种情况的原因可能是显示复选框的页面上的信息未更新。这是正确的，因为您没有在任何地方更新复选框的值，并且您始终假定值是明确的true和false。解决方案： 要解决此问题，您需要修改您的js函数，使其将作为element第一个参数和assignment.id第二个参数。在其中，您需要通过使用checkedstatus属性直接获取复选框的值来更新参数。&nbsp; <td scope="row" style="text-align: center">&nbsp; &nbsp; <form>&nbsp; &nbsp; {% csrf_token %}&nbsp; &nbsp; &nbsp; {% if assignment.status %}&nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" checked onclick='assignmentFinish(this,"{{assignment.id}}")'>&nbsp; &nbsp; &nbsp; {% else %}&nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" onclick='assignmentFinish(this,"{{assignment.id}}")'>&nbsp; &nbsp; &nbsp; {% endif %}&nbsp; &nbsp; </form>&nbsp; </td>function assignmentFinish(element,assignment) {&nbsp; &nbsp; link = "{% url 'uni:finish-assignment' %}";&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; type:'POST',&nbsp; &nbsp; &nbsp; url: link,&nbsp; &nbsp; &nbsp; data:{&nbsp; &nbsp; &nbsp; &nbsp; status: element.checked ,&nbsp; &nbsp; &nbsp; &nbsp; assignmentID: assignment,&nbsp; &nbsp; &nbsp; &nbsp; csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; success: function(){&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });}现在您将传递复选框的实际值，它应该按照您期望的方式运行。