Django и AJAX в сочетании

Я пытаюсь отправить простую форму в Django, которая будет содержать изображение, обработать ее на сервере и получить ответ без обновления страницы. Я искал несколько руководств, как использовать AJAX и jQuery для этого, но у меня не так много знаний в этом вопросе. Я полностью застрял и понятия не имею, что мне делать дальше. Пока что мой код выглядит так:

models.py

class Snip(models.Model):
    #some fields
    snip = models.FileField(upload_to="snips/")
    latex = models.TextField(default = '')

forms.py

from .models import Snip
from django import forms


class SnipForm(forms.ModelForm):
    class Meta:
        model = Snip
        fields = ['snip']

HTML:

<form id="snipForm" method="POST" enctype="multipart/form-data">
<input type="hidden" name="csrfmiddlewaretoken" value="...">
<div class="row align-items-center">
<div class="col-12">
<label for="id_snip">Snip:</label>
<input type="file" name="snip" required="" id="id_snip" class="btn-success p-2 rounded">
<input type="submit" name="upload" id="upload" class="btn btn-secondary">
</div>
</div>
</form>

JavaScript/AJAX

var snip = document.getElementById("id_snip");
var upload_btn = document.getElementById("upload")
upload_btn.addEventListener('click', function () {
var form_data = new FormData();
var ins = document.getElementById('snip_file').files.length;

if(ins == 0) {
    return console.log("No snip!!!")
         }
  form_data.append("file[]", snip.files[0]);
  csrf_token = $('input[name="csrfmiddlewaretoken"]').val();
  form_data.append("csrfmiddlewaretoken", csrf_token);
  $.ajax({
    url: "{% url 'generate' %}", 
    dataType: 'json', 
    cache: false,
    contentType: false,
    processData: false,
    //data: {'data': form_data, 'csrfmiddlewaretoken': csrf_token},
    data: form_data,
    type: 'post',
    success: function (response) { 
      // change some content on the page
    },
    error: function (response) {
      console.log("error")
    }
  });
});

views.py

from django.shortcuts import render
from django.contrib.auth.models import User
from .models import Snip
from .forms import SnipForm
from django.http import JsonResponse
from django.core import serializers

def generate(request):
    is_ajax = request.META.get('HTTP_X_REQUESTED_WITH') == 'XMLHttpRequest'
    if is_ajax and request.method == "POST":
        file = request.FILES['snip']
        processed_image = "Some text from OCR"
        return JsonResponse({'text':'Yay, I got text from OCR'})

    if request.method == 'GET':
        Users = User.objects.all()
        form = SnipForm()
        user_list = []
        for user in Users:
            if user.get_full_name():
                user_list.append(user.get_full_name())
        return render(request, "new.html", {'Users': user_list,     'form': form})

Подведем итоги: Изображение загружается в тег ввода id_snip. После нажатия на кнопку id="upload" оно должно быть отправлено на сервер django, а затем на внешний OCR API для получения некоторого текста обратно. Затем он должен быть отображен на лицевой стороне без обновления страницы. Однако после нажатия на submit я получаю ошибку:

The view docs.views.generate didn't return an HttpResponse object. It returned None instead.

Моей первой мыслью было проверить значение is_ajax. Оказалось, что оно равно false. Поэтому мой вопрос таков:

  1. Как я могу проверить, является ли запрос "AJAX"? Я знаю, что в предыдущих версиях django это был метод is_ajax(), но начиная с версии 3.1 это не рекомендуется
    2. .
  2. Есть ли какой-нибудь простой способ сделать это? Моя цель - поместить полученный ответ (текст) в другое место на странице.

Заранее спасибо :)

Вернуться на верх