如何使用 Ajax 在不重新加载页面的情况下提交表单

Question

我正在学习 Ajax，了解如何在不重新加载页面的情况下提交评论表单。我正在使用 Django，我在主页上有帖子列表，每个帖子都有评论表格。当我提交评论时，它不会保存在数据库中，也不会显示在浏览器中。当我在 Chrome 控制台上检查时，我收到了一个错误 2 个元素具有非唯一 ID。

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 代码是否有重复的 ID！这些必须是独一无二的。
3. 如果您对 html 使用 django 变量，请执行以下操作： 使用“{{ post.id }}”代替“{{post.id}}”，并在 var 周围使用空格。

4. 在

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

   您使用的不是该元素的 id，而是类名。

5. 检查提交的去向。检查 Django 是否正在处理请求。 （您可以在运行 Django 的控制台中看到这一点）。也可以在这里张贴截图！