Django ajax方法提交表单，及后端接受数据

前台代码：

{% block content %}
        <div class="wrapper wrapper-content">
            <div class="blog-content">
                {% for blog in blog %}
                <form id="formid" >
                    {% csrf_token %}
                    <div class="edit-title">
                        <b>标题</b>
                        <br>
                        <input name="id-blog" id="blog-id" type="hidden" value={{blog.id}}>
                        <input name="title" type="text" id="blog-title" value={{blog.title}}>
                    </div>
                    <div class="edit-content">
                        <b>正文</b>
                        <textarea name="body" id="blog-body">{{blog.body}}</textarea>
                    </div>
                    <div>
                        <!--<input type="submit" value="取消">-->
                        <button type="button" id="submit" >保存</button>
                    </div>
                </form>
                {% endfor %}
            </div>

js代码：

<!--ajax提交表单-->
    <script type="text/javascript">

       $(function(){
        $('#submit').on('click', function(){
            var id = $("#blog-id").val()
            var title = $("#blog-title").val()
            <!--var body = $("#blog-body").val()-->body是tinymce富文本编辑器，不能这样获取
            var body= tinyMCE.getInstanceById('blog-body').getBody().innerHTML;//谷歌中可以获取到body,火狐获取不到

            $.ajax({
                cache: false,
                type: "POST",
                url:"/sub_article/",
                data:{'title': title, 'body': body,'blogId':id},
                dataType:"json",
                async: true,
                beforeSend:function(xhr, settings){
                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
            },
            <!--回调函数success的data和上面的传如参数data不是一个-->
                success: function(data) {
                    if(data.status == 'success'){
                        console.log(data)
                        alert("提交成功");
                         <!--window.location.reload();-->
                    }else {
                        alert("fail");
                    }
                },
            });
        });
    })
    </script>

views：

def sub_article(request):
    # if request.is_ajax:
    if request.method == 'POST':
        # 获取ajax传过来的参数值
        data = request.POST
        id = data.get('blogId')
        print 'id:%s' % id
        title = data.get('title')
        body = data.get('body')
        # body = request.POST.get("blog-body")#此种方式不能获取到值
        print "title:%s" % title
        print "body:%s" % body
        BlogPost.objects.filter(id=int(id)).update(title=title)
        BlogPost.objects.filter(id=int(id)).update(body=body) # 更改数据
        # BlogPost.objects.create(title=title)
        # BlogPost.objects.create(body=body)#提交时插入两条半截数据很可能是这里分开执行引起的，需要通过id来准确定位修改哪条数据
        return HttpResponse('{"status":"success"}', content_type='application/json')
    else:
        return HttpResponse('{"status":"fail", "msg":"fail hhahh"}', content_type='application/json')

接收参数

1.GET 方式 

$.ajax({ 
url:'/hello/getTest', 
type:'GET', 
data:{'a':3333,'b':444}, 
success:function(data){ 
alert(data.message); 
} 
}) 

views->参数解析和用数据字典的方式返回json 数据（跨域名请求数据，则使用 jsonp字符串）

```
def getTest(request):
data = request.GET
print(data)
a = data.get('a')
b = data.get('b')
response_data = {}
response_data['result'] = 's'
response_data['message'] = a+b
return HttpResponse(json.dumps(response_data), content_type="application/json")
```

     function postTest() {
        $.ajax({
            url:'/hello/postTest',
            type:'POST',
            data:{'a':3333,'b':444},
            success:function(data){
                alert(data.message);
            }
        })
    }

views-> 引入from django.views.decorators.csrf import csrf_exempt，并且增加注解@csrf_exempt，目的是避开CSRF检查

    @csrf_exempt
    def postTest(request):
        data = request.POST
        print(data)
        a = data.get('a')
        b = data.get('b')
        response_data = {}
        response_data['result'] = 's'
        response_data['message'] = a+b
        return JsonResponse(response_data)

注意点:

1. post 方式有避开CSRF检查，具体不回避CSRF检查的方式需要再研究
2. 返回Json的方式有两种

<!--ajax提交表单-->
<script type="text/javascript">

$(function(){
        $('#submit').on('click', function(){
            var id = $("#blog-id").val()
            var title = $("#blog-title").val()
            <!--var body = $("#blog-body").val()-->body是tinymce富文本编辑器，不能这样获取
            var body= tinyMCE.getInstanceById('blog-body').getBody().innerHTML;//谷歌中可以获取到

            $.ajax({
                cache: false,
                type: "POST",
                url:"/sub_article/",
                data:{'title': title, 'body': body,'blogId':id},
                dataType:"json",
                async: true,
                beforeSend:function(xhr, settings){
                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
            },
            <!--回调函数success的data和上面的传如参数data不是一个-->
                success: function(data) {
                    if(data.status == 'success'){
                        console.log(data)
                        alert("提交成功");
                         <!--window.location.reload();-->
                    }else {
                        alert("fail");
                    }
                },
            });
        });
    })
    </script>