“成功”后 Django Ajax 表单提交重新加载

Question

从我之前包含 django 和 ajax (Django Ajax Image submit) 问题的帖子扩展，如编辑中所述，我来到以下情况：

我的 jquery/ajax 调用：

<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>

如 cmets 中所述，存在这种奇怪的行为，页面不会重新加载但图像没有保存，或者图像被保存但页面呈现为仅包含“成功”的白页。我可以看到，console.log(1) 实际执行了，然后加载了白页。

我试图让我的文件尽可能简单。

这是我在views.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 浏览器，在检查元素的网络选项卡中查看返回状态代码，查看返回的状态代码，如果有任何错误，请告诉我