Ajax Post Request не работает в django

У меня проблема с django. Я так много исследовал другие вопросы, но их ответы не работают для меня. Мне нужно отправить строку base64 изображения в мое представление, чтобы я мог хранить строку вместо изображения в моей базе данных. Итак, я хочу отправить данные через ajax в мое представление на django. По какой-то причине форма уже отправляется django автоматически, и я пытался остановить это, но тогда ajax тоже не срабатывает. Я буду очень признателен за помощь, потому что это уже стоило мне столько времени.

add.html

<form method="post" enctype="multipart/form-data" onsubmit="submitdata()">
    {% csrf_token %}
    <input type="text" name="dish" required id="id_dish" placeholder="Rezeptname">
    <img ><input type="file" name="image" required id="id_image" accept="image/*">
    <div class="image-upload"><img id="img_id" src="#">
    </div><button type="submit">Upload</button>
</form>
<script>
    function submitdata() {
    $.ajax({
        type: "POST",
        contentType: "application/json",
        url: "/add",
        data: JSON.stringify({

            "dish": "test",
            "image": dataurl,
            "recipe": document.getElementsByName("recipe")[0].value,
            "caption": document.getElementsByName("caption")[0].value
        }),
        dataType: "json",
    });
}
</script>

views.py

@login_required(login_url="login")
def add(response):
  if response.method == "POST":
    form = AddForm(response.POST, response.FILES)

    if form.is_valid():
        
        print(response.POST)
        # The print statement prints the data from the automatical form 
          submit, not from the ajax submit


        current_user = Client.objects.get(id=response.user.id)
        current_user.post_set.create(poster=response.user.username,
                                    dish=form.cleaned_data.get("dish"),
                                    image=response.POST.get("image"),
                                    caption=form.cleaned_data.get("caption"),
                                    recipe=form.cleaned_data.get("recipe"))
        
        messages.success(response, "You successfully added a post.")
        return redirect("home")

else:
    form = AddForm()

return render(response, "main/add.html", {"form":form})

urls.py

urlpatterns = [
path("add", views.add, name="add")
]

forms.py

class AddForm(forms.ModelForm):

dish = forms.CharField()
image = forms.FileField()
caption = forms.TextInput()
recipe = forms.TextInput()

class Meta:
    model = Post
    fields = ["dish", "image", "recipe", "caption"]

Когда вы используете свойство onsubmit и хотите, чтобы форма не отправляла данные, убедитесь, что обработчик возвращает false.

Если обработчик onsubmit возвращает false, элементы формы не отправляются. Если обработчик возвращает любое другое значение или ничего не возвращает, форма отправляется нормально.

<script>
    function submitdata() {
    $.ajax({
        type: "POST",
        contentType: "application/json",
        url: "/add",
        data: JSON.stringify({

            "dish": "test",
            "image": dataurl,
            "recipe": document.getElementsByName("recipe")[0].value,
            "caption": document.getElementsByName("caption")[0].value
        }),
        dataType: "json",

        //return false if ajax is successful
        // you can also do something with response data if needed
        success: function(data) {return false;},
        //return false if ajax request returns error
        error: function(data) {return false;},
    });
}
</script>
Вернуться на верх