Django Ajax Форма отправки перезагрузится после "успеха"

Question

Исходя из моего предыдущего поста, содержащего проблемы с django и ajax (Django Ajax Изображение отправить ), я пришел, как упоминалось в РЕДАКТИРОВАНИИ, к следующей ситуации:

My jquery / ajax call:

<script>
    $(document).ready(function () {
      // This jquery changes the appearance of the django { form_image }
      var imgElement = $('#id_image');

      imgElement.css('visibility', 'hidden');

      console.log($('#id_image').attr('type'))

      // This function triggers the hidden submit,
      //  which triggers the ajax image request
      imgElement.on({
        change: function () {
          $('#hidden-submit-img').click();
        },
      });
    });


    // This jquery is for the ajax post of the image

    // Doing it with submit, the image wont get saved, but the request is "success"
    // $('#image_form').submit(function (event) {

    // Doing it with change, the image gets saved successfully, but the respond loads a new page
    $('#image_form').change(function (event) {
      event.preventDefault();
      $.ajax({
        data: {
          image: $('#id_image').val(),
          csrfmiddlewaretoken: '{{ csrf_token }}'
        },
        enctype: $(this).attr('enctype'),
        type: $(this).attr('method'),
        url: $(this).attr('action'),
        success: function () {          
          console.log(1);

        },
        error: function () {
          console.log(0);
        }

      });
    });
    </script>

Как описано в комментариях, это странное поведение: либо страница не будет перезагружена, но изображение не будет сохранено, либо изображение получится сохранено, но страница отображается на белой странице, содержащей только «success». Я вижу, что console.log(1) на самом деле выполняется, а затем загружается белая страница.

Я старался максимально упростить свои файлы.

Вот мое представление в представлениях. py:

def image_feedback(request): # url 'website:image-feedback'
    if request.method == 'POST':

        image = request.FILES.get('image')

        ImagesUpload.objects.create(
            image = image,
        )

        return HttpResponse('success')

models.py:

class ImagesUpload(models.Model):
    image = models.ImageField(upload_to=renaming_file)

    def __str__(self):
        return str(self.image)

home. html:

<form id="image_form" method="post" enctype="multipart/form-data" action="{% url 'website:image-feedback' %}">{% csrf_token %}
  <button class="btn btn-secondary" onclick="$('#id_image').click()">Import Image</button>

  {{ form_image.image }}

  <input id="hidden-submit-img" value="SUBMIT" type="submit" style="visibility:hidden">
</form>

Я думаю, что я близок к решению, но, возможно, мой навыков недостаточно.

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

Answer 1

ваша html форма

<form id="image_form"> #does not provide any attribute
{% csrf_token %}
{{ form_image.image }}
</form>

jquery поставить jquery на той же странице, где ваша форма

<script>
 $("#id_image").change(function(){ // here my second change apply id of image field
        var formdata = new FormData(); //create formdata object


        formdata.append('image',this.files[0])
        formdata.append('csrfmiddlewaretoken',$('input[name=csrfmiddlewaretoken]').val()); //apply csrf token
        $.ajax({
            url:"{% url 'website:image-feedback' %}",
            method:'POST',
            data:formdata,
            enctype: 'application/x-www-form-urlencoded',
            processData:false,
            contentType:false,
            success:function(data){
              //update src attribute of img tag
                $('#profile_pic').attr('src',data.url);
                $('#image_form').trigger('reset'); // This reloads the form for additional upload
            },
            error:function(error){
              //display error base on return the view
                 alert(error.error)
            }
        });
    return false;
 });
</script>

ваш взгляд

def image_feedback(request): # url 'website:image-feedback'
    if request.method == 'POST':

        image = request.FILES.get('image')

        img = ImagesUpload.objects.create(
            image = image,
        )
        return JsonResponse(status=200,data={"url": img.url}) #return json response 
     else:
        return JsonResponse(status=203,data={"error": "unauthorized  request.!!"})

Я даю много вещей, которые вы видите и применяете в своем коде, затем открывайте firefox браузер, смотрите на вкладке сети элемента inspect, возвращайте ваш код состояния, смотрите, какой статус код возврата и дайте мне знать, если какая-либо ошибка