时间戳

首页 > 解决方案 > 如何通过ajax Django发布复选框数据？

javascript - 如何通过ajax Django发布复选框数据？

问题描述

如何is_read使用 ajax 将复选框字段提交到数据库中？当我尝试勾选复选框字段时，我收到此错误core.models.Article.DoesNotExist: Article matching query does not exist.

模型.py

class Article(models.Model):
    title = models.CharField(max_length=300)
    is_read = models.BooleanField(default=False)

视图.py

@csrf_exempt
def Story_status_update(request):
    if request.method == 'POST':
        pk = request.POST.get('pk')
        item = Article.objects.get(id=pk)
        print(item)
        item.is_read = True
        item.save()
        return JsonResponse({'succes': True}, status=200)
    else:
        return JsonResponse({'succes': False, 'errors': []}, status=400)

html

<tbody>
    {% for object in articles %}
    <tr data-pk="{{ object.id }}">
        <td>{{ object.title }}</td>
        <td><input type="checkbox" data-id="{{ object.id }}" name="is_read" id="id_is_read" /></td>
    </tr>
    {% endfor %}
</tbody>

ajax.js

    $("#id_is_read").click(function () {
        var pk = $('tr').attr("data-pk");
        $.ajax({
            type: "Post",
            contentType: "application/json;",
            url: "{% url 'status-update' %}",
            data: { pk: pk },
            dataType: "json",
            success: function (response) {
                console.log(response)
            },
        });
    });

标签： javascriptpythonjquerydjangoajax

解决方案

我不确定 Django 部分，但是

对于 Html，您正在创建多个具有相同 id 的复选框，这是无效的，请改用一个类。

<tbody>
    {% for object in articles %}
    <tr data-pk="{{ object.id }}">
        <td>{{ object.title }}</td>
        <td><input type="checkbox" data-id="{{ object.id }}" name="is_read" class="class_is_read" /></td>
    </tr>
    {% endfor %}
</tbody>

对于 JavaScript，使用类作为选择器并选择正确的行。
此外，内容类型错误，因为您没有发送 JSON，因此请删除contentType

$(".class_is_read").click(function () {
    var pk = $(this).closest('tr').attr("data-pk"); // select the correct row
    $.ajax({
        type: "POST",
        url: "{% url 'status-update' %}",
        data: { pk: pk },
        dataType: "json",
        success: function (response) {
            console.log(response)
        },
    });
});

推荐阅读