Django Ajax POST запрос не перенаправляется

Я пытаюсь создать сайт для захвата изображения с камеры клиента и сохранения его в базе данных. Однако после того, как все было сохранено, я не могу перенаправить страницу.

views.py

def facial_capture(request):
    if request.method == 'POST':
        file = request.FILES['snap']
        if file:
            student = Student.objects.get(id=request.session['id'])
            if student:
                FaceImage.objects.create(student=student, image=file)
                return HttpResponse("{'status': 1}", content_type='application/json')
        return HttpResponse("{'status': 0}", content_type='application/json')
    return render(request, 'id_capture/facial_capture.html')

face_capture.html

{% block body %}
    <div class="container">
        <form>{% csrf_token %}
            <video id="video" width="640" height="480" autoplay></video>
            <button id="send">Submit</button>
            <canvas id="image_canvas" width="640" height="480"></canvas>
        </form>
    </div>
{% endblock %}

face_capture.js

$(document).ready(function () {
    var video = document.getElementById('video');
    var canvas = document.getElementById('image_canvas');
    var context = canvas.getContext('2d');
    var w = 640, h = 480;

    if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
            video.srcObject = stream;
            video.play();
        });
    }

    document.getElementById("send").addEventListener("click", function() {
        context.translate(w, 0);
        context.scale(-1, 1);
        context.drawImage(video, 0, 0, w, h);
        canvas.toBlob(upload, "image/jpeg");
    });

    function upload(file) {
        var formData =  new FormData();
        formData.append("snap", file);
        const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;

        $.ajax({
            headers: {'X-CSRFToken': csrftoken},
            type: 'POST',
            url: '/signup/facial_capture',
            data: formData,
            cache: false,
            processData: false,
            contentType: false,
            enctype: 'multipart/form-data',
            success: function(data){
                console.log('response received');
                if (data.status == 1) {
                    console.log('status ok');
                    window.location.href = "login";
                } else {
                    console.log('status failed');
                    window.location.reload();
                }
            }
        })
    }
});

Я предполагаю, что после возврата HttpResponse он попадет в функцию ajax success и перенаправит на страницу входа, но почему-то я все еще на странице facial_capture с прикрепленным csrfmiddlewaretoken.

Мой вопрос заключается в том, что это правильный способ перенаправления страницы после успешной отправки почтового запроса с помощью ajax или я делаю что-то неправильно?

Во-первых, вместо HttpResponse вы можете использовать JsonResponse, который принимает словарь. Во-вторых, window.location.href принимает либо абсолютный url, либо относительный url, начинающийся с /

//  Your django code should be like this

return HttpResponse(json.dumps({'status': "1"}), content_type="application/json")

А в шаблоне Django нужно присвоить url следующим образом. {% url 'login' %}

function upload(file) {
        var formData =  new FormData();
        formData.append("snap", file);
        formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');
        $.ajax({
            type: 'POST',
            url: "{% url 'facial_capture' %}",
            data: formData,
            cache: false,
            processData: false,
            contentType: false,
            enctype: 'multipart/form-data',
            success: function(data){
                console.log('response received');
                if (data.status == 1) {
                    console.log('status ok');
                    window.location.href = "{% url 'login' %}";
                } else {
                    console.log('status failed');
                    window.location.reload();
                }
            }
        })
    }

Мне удалось выяснить причину. Я забыл объявить тип кнопки, и по умолчанию это кнопка submit. Все, что мне нужно сделать, это изменить тип кнопки на:

<button id="send" type="button">Submit</button>

А также, по предложению всех, я должен изменить ответ на:

return JsonResponse({"status": 1})
// or
return HttpResponse(json.dumps({"status": 1}), content_type='application/json')
Вернуться на верх