前台代码：
{% 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)注意点:
- post 方式有避开CSRF检查，具体不回避CSRF检查的方式需要再研究
- 返回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>