Как опубликовать данные чекбокса с помощью ajax Django?

Как отправить поле с флажком is_read в базу данных с помощью ajax? когда я пытаюсь отправить поле чекбокса, я получаю эту ошибку core.models.Article.DoesNotExist: Article matching query does not exist.

models.py

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

views.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)
            },
        });
    });

Я не уверен насчет части 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)
        },
    });
});
Вернуться на верх