Как отправить форму без перезагрузки страницы, используя Ajax

Question

Я изучаю Ajax, как я могу отправить форму комментария без перезагрузки страницы. Я использую Django, у меня есть список постов на домашней странице с комментариями. Когда я отправляю комментарий, он не сохраняется в базе данных, а также не отображается в браузере. Когда я проверяю консоль Chrome, я получаю сообщение об ошибке 2 элемента с неуникальным идентификатором.

from django.http import JsonResponse
from django.template.loader import render_to_string

def home(request):
    all_images = Post.objects.filter(poster_profile=request.user)

    if request.method == 'POST':
        post_id = request.POST.get("post_comment")
        post_obj = Post.objects.get(pk=post_id)
        form = CommentForm(request.POST)
        if form.is_valid():
            comment=form.save(commit=False)
            comment.user=request.user
            comment.commented_image=post_obj
            comment.save()
    else:
        form=CommentForm()
context = {'all_images':all_images, 'form':form}
if request.is_ajax():
    html=render_to_string('ajax_feeds_comment.html', context, request=request) 
return render(request, 'home.html', context)

#home.html
{% for post in all_images %}
<img src="{{ post.image.url }}">
{% for comment in post.comments.all %}
<p>{{ comment.comment_post }}</p>
{% endfor %}
<div class="reload-form">
{% include "ajax_feeds_comments.html" %}
</div>
{% endfor %}

#ajax_feeds_comments.html
<form method="POST" class="feeds-comment" action=".">
{% csrf_token %}
<input type="hidden" value="{{post.id}}" name="post_comment">
<textarea name="comment_post" class="form-control" id="id_comment_post{{post.id}}"></textarea>
<button type="submit" class="btn btn-primary">submit</button>
</form>

<script>
$(document).on('submit', '.feeds-comment', function(event){
event.preventDefault();
console.log($(this).serialize());
$.ajax({
    type: 'POST', 
    url: $(this).attr('action'), 
    data: $(this).serialize(), 
    dataType: 'json', 
    success: function(response){
        $('.reload-form').html(response['form']);
   }, 
    error: function(rs, e) {
        console.log(rs,responseText);
   }, 
   });
   });
</script>

Answer 1

Здесь есть несколько неправильных вещей:

1. В вашем "urls.py" вы не должны отправлять каждый запрос на ваши просмотры. Это где вы получаете «favico.ico» ошибка 500 получить от. Если у вас нет favico, это нормально, но ошибка 500 - нет.
2. Проверьте код html на наличие дубликатов! Они должны быть уникальными.
3. Если вы используете django переменные для html, сделайте это следующим образом: вместо "{{post.id}}" используйте: "{{post.id}}" с пробелами вокруг переменной var ,

4. В

   document.on ("submit", "feeds-comment", function () {...})

   вы не являетесь используя идентификатор этого элемента, но это имя класса.

5. Проверьте, куда отправляется заявка. Проверьте Django, если запрос обрабатывается. (Вы видите это в консоли, где работает Django). Также возможно Опубликовать скриншот здесь!