Как оставлять комментарии, используя Ajax в Django?

Question

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

Вот форма моего комментария

<form class='my-4' id='comment' action='/main/comment/' method='post'>{% csrf_token %}
<div class="form-group">
<input type='hidden' id='id' name='id' value='{{blog.blog_id}}'>
<label for="text"><b>POST YOUR Comments HERE</b></label>
<textarea class="form-control" id="text" name='text' rows="3"></textarea>
</div>
<button type="submit" class='btn btn-primary '>POST COMMENT</button>
</form>

Вот моя функция

if request.method=="POST":
    text=request.POST['text']
    id=request.POST['id']
    user=request.user
    comment=Comment(text=text,user=user,blog_id=id)
    comment.save()
    return redirect('/main/blogs/'+ id+'/')

URL

path('comment/',views.comment,name='comment')

Пожалуйста, помогите мне с этим. Я новичок.

Answer 1

Попробуйте это.

Your function 

    def yourfunction()
      if request.POST.get('action') == 'post':
            comment = request.POST.get('comment')

            response_data['comment'] = comment

            Comment.objects.create(
                text=comment,user=user,blog_id=id
                )
            return JsonResponse(response_data)

Ваша форма

  <form class='my-4' id='comment' method='post'>{% csrf_token %}
    <div class="form-group">
    <input type='hidden' id='id' name='id' value='{{blog.blog_id}}'>
    <label for="text"><b>POST YOUR Comments HERE</b></label>
    <textarea class="form-control" id="text" name='text' rows="3"></textarea>
    </div>
    <button type="submit" class='btn btn-primary '>POST COMMENT</button>
    </form>



Add this in jquery.


$(document).on('submit', '#comment',function(e){
    $.ajax({
        type:'POST',
        url:'{% url "yoururl" %}',
        data:{
            comment:$('#text').val(),
            csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
            action: 'post'
        },
        success:function(json){
            document.getElementById("post-form").reset(); //this will reset your form 
        },
        error : function(xhr,errmsg,err) {
        console.log(xhr.status + ": " + xhr.responseText); //error to the console
    }
    });
});