django学习——通过ajax提交表单

以对博文的评论为例来讲表单的提交，我们希望达到的结果是：
1. 评论完后，可以直接看到自己的评论；
2. 如果评论不正确，比如评论字数超出规定范围，则给出错误提示。

如果采用传统的提交表单做法，是可以完成的：

templates

<form active="{% url 'blog' blog.id %}" method="post" class="comment-form" >
    {% csrf_token %}
  <div class="form-group">
    <label class="name">名字: </label>
    <input name="name" type="text" class="#" id="js-name" placeholder="请输入用户名">
    {{ comment_form.name.errors }}
  </div>
  <div class="form-group">
    <label class="comment">评论:</label>
    <textarea name="content" class="form-control" id="js-content" rows="5" placeholder="不超过300个字"></textarea>
    {{ comment_form.content.errors }}
  </div>
    <p class="error company-tips" id="jsCompanyTips"></p>

    <button class="btn" type="submit" id="jsStayBtn" value="发表">发表</button>
</form>

views.py

class BlogView(View):
    ...

    def post(self, request, blog_id):
        comment_form = CommentForm(request.POST)
        if comment_form.is_valid():
            comment = comment_form.save(commit=False)
            comment.blog_id = blog_id
            comment.save()
            return HttpResponseRedirect(reverse('blog_id', args=(blog_id,)))
        else:
            ...
            return render(request, 'blog-detail.html', {"comment_form": comment_form})

其中CommentForm采用ModelForm的方法，采用这种方法，在else中还得重复写很多传递到前端的代码。

此时可以采用ajax异步传输的方式，也就是只针对评论这块的内容，博客中的其它内容并不重新加载（本文中其实还是加载了的）。

形式如下：

template:

<div class="content-wrap-comment">

        <h2 class="comment-add">发表评论</h2>

<form  class="comment-form" id="jsStayForm">
    {% csrf_token %}
  <div class="form-group">
    <label class="name">名字:  </label>
    <input name="name" type="text" class="#" id="js-name" placeholder="   请输入用户名">
    {{ comment_form.name.errors }}
  </div>
  <div class="form-group">
    <label class="comment">评论:</label>
    <textarea name="content" class="form-control" id="js-content" rows="5" placeholder="不超过300个字"></textarea>
    {{ comment_form.content.errors }}
  </div>
    <p class="error company-tips" id="jsCompanyTips"></p>

    <button class="btn" type="button" id="jsStayBtn" value="发表">发表</button>
</form>

js代码：

<script>
    $(function(){
        $('#jsStayBtn').on('click', function(){
            var name = $("#js-name").val()
            var content = $("#js-content").val()

            $.ajax({
                cache: false,
                type: "POST",
                url:"/add_comment/",
                data:{'name': name, 'content': content, 'blog': {{ blog.id }}},
                dateType:"json",
                async: true,
                beforeSend:function(xhr, settings){
                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
            },
                success: function(data) {
                    if(data.status == 'success'){
                        alert("提交成功");
                         window.location.reload();//刷新当前页面.
                    }else if(data.status == 'fail'){
{#                        $('#jsCompanyTips').html(data.msg)#}
                        alert("评论错误，请重新评论");
                    }
                },
            });
        });
    })

</script>

view.py:

class AddCommentView(View):
    """
    添加评论
    """
    def post(self, request):
        comment_form = CommentForm(request.POST)
        if comment_form.is_valid():
            comment = comment_form.save(commit=False)
            comment.save()
            return HttpResponse('{"status":"success"}', content_type='application/json')
        else:
            return HttpResponse('{"status":"fail", "msg":"评论错误，请重新评论"}', content_type='application/json')

url.py:

url(r'^add_comment/$', AddCommentView.as_view(), name='add_comment'),

这里直接将评论的外键blog，也传递到了前端，因此并不用在url中体现了。这也是通过ajax异步传输的好处。

当然，还可以通过json.dump的方法，将form表单中的错误信息传递到前端，本人js没学过，不太会弄，但是是可以的。以后会了再来补充。

采用ajax需要注意的是：
1. form表单中省去active和method，都在ajax中书写；
2. 提交按钮出的，要将submit改为button， 因为我们表单中书写的内容并不通过表单提交，而是通过ajax提交；
3. 前后端数据交换通过json的方式进行。