Question

我有点写了ajax函数（关于youtube上的一些教程），但不知道在成功部分写什么。如果我发出警报（＆＃39;它工作了＃39;）它只是显示它有效，但表格没有通过。我试图做的是发送评论而不用ajax函数刷新页面。如果有人能告诉我在成功函数中应该做些什么，我将非常感谢你的帮助，谢谢。我有两种形式。

<form method="POST" action='{% url "comment_create" %}' class='commentForAjax'>{% csrf_token %}
<input type='hidden' name='post_id' value='{{ post.id }}'/>
<input type='hidden' name='origin_path' value='{{ request.get_full_path }}'/>

{% crispy comment_form comment_form.helper %}
</form>

    <div class='reply_comment'>
        <form method="POST" action='{% url "comment_create" %}'>{% csrf_token %}
        <input type='hidden' name='post_id' id='post_id' value='{% url "comment_create" %}'/>
        <input type='hidden' name='origin_path' id='origin_path' value='{{ comment.get_origin }}'/>
        <input type='hidden' name='parent_id' id='parent_id' value='{{ comment.id }}' />
        {% crispy comment_form comment_form.helper %}

        </form>
        </div>


<script>
 $(document).on('submit','.commentForAjax', function(e){
  e.preventDefault();

  $.ajax({
    type:'POST',
    url:'/comment/create/',
    data:{
      post_id:$('#post_id').val(),
      origin_path:$('#origin_path').val(),
      parent_id:$('#parent_id').val(),
      csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
    },
    success:function(){
      alert('it worked');
    }
  })

 })
</script>

后端代码

#Comments
urlpatterns += patterns('comments.views',
    url(r'^comment/create/$', 'comment_create_view', name='comment_create'),
)

comment views.py
def comment_create_view(request):
    if request.method == "POST" and request.user.is_authenticated():
        parent_id = request.POST.get('parent_id')
        post_id = request.POST.get("post_id")
        origin_path = request.POST.get("origin_path")
        try:
            post = Post.objects.get(id=post_id)
        except:
            post = None

        parent_comment = None
        if parent_id is not None:
            try:
                parent_comment = Comment.objects.get(id=parent_id)
            except:
                parent_comment = None

            if parent_comment is not None and parent_comment.post is not None:
                post = parent_comment.post

        form = CommentForm(request.POST)
        if form.is_valid():
            comment_text = form.cleaned_data['comment']
            if parent_comment is not None:
                # parent comments exists
                new_comment = Comment.objects.create_comment(
                    user=MyProfile.objects.get(user=request.user),
                    path=parent_comment.get_origin, 
                    text=comment_text,
                    post = post,
                    parent=parent_comment
                    )
                #affected_users = parent_comment.get_affected_users()
                #print "this is"
                affected_users = parent_comment.get_affected_users()

                return HttpResponseRedirect(post.get_absolute_url())
            else:
                new_comment = Comment.objects.create_comment(
                    user=MyProfile.objects.get(user=request.user),
                    path=origin_path, 
                    text=comment_text,
                    post = post
                    )
                return HttpResponseRedirect(post.get_absolute_url())
        else:
            messages.error(request, "There was an error with your comment.")
            return HttpResponseRedirect(origin_path)

    else:
        raise Http404

Answer 1

在POST中使用$.ajax不会发布表单，但会发布您在该方法中发送的数据。您需要选择使用哪种方法，而不是像您一样。您的代码会点击表单的提交，阻止它，然后使用XmlHttpRequest来发布数据。为什么不删除您的表单，只需在用户点击按钮时使用$.ajax实现？

您也不需要使用success()回调。

修改的

如果您使用表单，则需要某种方式来提交表单。通常是提交＆＃39;输入。这将发布到表单的目标网址。

如果您使用ajax，则不需要表单（或任何元素的name属性），但您确实需要某种操作/事件来触发使用该ajax POST。这通常也是单击按钮或选择onchange。而不是

$(document).on('submit','.commentForAjax' ... etc

处理表单的提交事件，您可以使用类似的处理程序进行按钮的点击。

$("#buttonId").on("click", function() {
    //Call $.ajax POST here
});

Answer 2

YouTube上有一个django + jquery聊天系统教程。这使用AJAX发送消息。您可以从本教程中了解并基于此优化代码。 https://www.youtube.com/watch?v=Z8Gjm858CWg

该教程可能有点令人困惑，但您会在视频说明中找到GitHub存储库链接。下载代码并从那里开始工作。

使用ajax提交表单

2 个答案: