异步表单提交django

Question

我正在使用 ajax 提交表单，并且可以正常使用。但它不是异步工作的。当我尝试上传文件时，它上传成功，然后页面再次加载。我希望它异步制作。另外，我也想做一个进度条。但是事情并没有像我预期的那样工作。

我的forms.py

from django import forms
from .models import Comment
from .models import post

class UploadForm(forms.ModelForm):
class Meta:
    model = post
    fields = ('image', 'video', 'content',)

我的views.py

def django_image_and_file_upload_ajax(request):
if request.method == 'POST':
   form = UploadForm(request.POST, request.FILES)
   if form.is_valid():
       form.instance.author = request.user
       form.save()
       return JsonResponse({'error': False, 'message': 'Uploaded Successfully'})
   else:
       return JsonResponse({'error': True, 'errors': form.errors})
else:
    form = UploadForm()
    return render(request, 'blog/upload.html', {'form': form})

和我的upload.html

{% extends "blog/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<main>
    <div class="container">
      <div class="row">
        <div class="col-md-8 my-5">
            <div class="content-section" style="padding:10px 20px">

               <form
                enctype="multipart/form-data"
                id="id_ajax_upload_form" method="POST"
                novalidate="">
                    <fieldset class="form-group">
                    {% csrf_token %}
                        <legend class="border-bottom mb-4"><i class="fas fa-feather-alt text-muted mr-2"></i>Create a post</legend>
                        {{ form.as_p }}
                    </fieldset>
                    <div class="form-group">
                        <input type="submit" />
                    </div>
               </form>
            </div>
        </div>
      </div>
    </div>
</main>
{% endblock content %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
// form upload
 $('#id_ajax_upload_form').submit(function(e){
     e.preventDefault();
     $form = $(this)
     var formData = new FormData(this);
     $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        success: function (response) {
            $('.error').remove();
            console.log(response)
            if(response.error){
                $.each(response.errors, function(name, error){
                    error = '<small class="text-muted error">' + error + '</small>'
                    $form.find('[name=' + name + ']').after(error);
                })
            }
            else{
                alert(response.message)
                window.location = ""
            }
        },
        cache: false,
        contentType: false,
        processData: false
    });
});
// end

我哪里错了？

Answer 1

好的，知道了！但是任何知道如何添加进度条的人都会有所帮助。

异步表单提交django

asynchronus form submission django

django

django-forms

django-ajax-selects