Django Ajax запрос застревает после нажатия «отправить» - PullRequest
0 голосов
/ 09 апреля 2020

Я использую AJAX для создания объекта поста в блоге с веб-сайта, однако после нажатия на кнопку отправить chrome зависает и модальное окно не скрывается. Я вижу в терминале, что вид вызывается, но мой chrome зависает, и мне нужно закрыть вкладку, а затем снова зайти на сайт. Я также пытался использовать Safari, но это также происходит там, я ничего не изменил в своем коде, я не знаю, почему это происходит.

Мой вид для создания сообщения:

@login_required
def post_create(request):
    data = dict()
    if request.method == 'POST':
        image_form = ImageForm(request.POST or None, request.FILES or None)
        form = PostForm(request.POST)
        if form.is_valid() and image_form.is_valid():    
            post = form.save(False)
            post.author = request.user
            post.save()
            images = request.FILES.getlist('image')
            for i in images:
                image_instance = Images(file=i,post=post)
                image_instance.save()
            data['form_is_valid'] = True
            posts = Post.objects.all()
            posts = Post.objects.order_by('-last_edited')
            data['posts'] = render_to_string('home/posts/home_post.html',{'posts':posts},request=request)
        else:
            data['form_is_valid'] = False
    else:
        image_form = ImageForm
        form = PostForm      
    context = {
    'form':form,
    'image_form':image_form
    }
    data['html_form'] = render_to_string('home/posts/post_create.html',context,request=request)
    return JsonResponse(data)  

my javascript для обработки Ajax:

$(document).ready(function(){
    $(document).ajaxSend(function (event, jqxhr, settings) {
        jqxhr.setRequestHeader("X-CSRFToken", '{{ csrf_token }}');
    });
    var ShowForm = function(e){
        e.stopImmediatePropagation();
        var btn = $(this);
        $.ajax({
            url: btn.attr("data-url"),
            type: 'get',
            dataType:'json',
            beforeSend: function(){
                $('#modal-post').modal('show');
            },
            success: function(data){
                $('#modal-post .modal-content').html(data.html_form);
            }
        });
        return false;
    };
    var SaveForm =  function(e){
        var form = new FormData(this);
        e.stopImmediatePropagation();
        $.ajax({
            url: $(this).attr('data-url'),
            type: $(this).attr('method'),
            data: form,
            cache: false,
            processData: false,
            contentType: false,
            dataType: 'json',
            success: function(data){
                if(data.form_is_valid){
                    $('#post-list div').html(data.posts);
                    $('#modal-post').modal('hide');
                } else {
                    $('#modal-post .modal-content').html(data.html_form)
                }
            }
        })
        return false;
    }

//create
$('.create-post-btn').click(ShowForm);
$('#modal-post').on("submit",".post-create-form",SaveForm)

//update
$('#post-list').on("click",".show-form-update",ShowForm);
$('#modal-post').on("submit",".update-form",SaveForm)

//delete
$('#post-list').on("click",".show-form-delete",ShowForm);
$('#modal-post').on("submit",".delete-form",SaveForm)
});

и мой post_create. html:

{% load crispy_forms_tags %}
{% load static %}
<script src="{% static 'js/image_upload.js' %}"></script>
<form method="POST" data-url="{% url 'home:post-create' %}" class="post-create-form" enctype="multipart/form-data">
    {% csrf_token %}
        <div class="modal-header">
            <h5 class="modal-title" >Create a Post</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    <div class="modal-body" style="overflow-y: auto; margin:0;">
        {{ form|crispy }}
        <div class="d-flex justify-content-left">
            <div>
                <button type="button" id="upload-image" class="btn btn-sm mr-auto btn-primary pb-1 fileinput-button">
                    <span><i class="fas fa-image"></i></span>
                </button>
            </div>
            <div>
                <p class="pt-1 mx-2 text-muted small">Add up to four images to your post</p>
            </div>
        </div>
        {{ image_form }}
    </div>
    <style>
        label[for="id_file"]{
            display: none;
        }
        .modal-body {
            overflow-y: auto;
        }
    </style>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Post</button>
    </div>
</form>

Я также посмотрел на консоль, но ошибок при печати нет.

Спасибо за всю помощь заранее.

...