Ajax传递json数据
Ajax操作与json数据格式在实际中的运用十分广泛，本文为大家介绍一个两者相结合的小案例：
项目结构
我们新建一个Django项目，在里面创建一个名为app01的应用：
python manage.py startapp app01
路由——我们在全局的urls.py文件中加入一个index路由：
from django.contrib import admin
from django.urls import path,re_path
from app01 import views
urlpatterns = [
path('admin/', admin.site.urls),
re_path('^index/$',views.index ),
]
视图函数——视图函数中定义一个名为index的函数：
from django.shortcuts import render,HttpResponse
def index(request):
if request.method == 'POST':
#请求报文中的请求体
print('body:',request.body)
#当contentType为urlencoded的时候，request.POST才有值
print('POST:',request.POST)
return HttpResponse('OK!')
return render(request,'index.html')
这里需要注意一下，windows中，在templates包中加入index.html文件之前需要在全局的settings.py文件中的TEMPLATES列表里的DIRS改成下面这个列表而不是默认的空列表：
[os.path.join(BASE_DIR,'templates')]
然后，我们在templates包中加入index.html文件。
在里面加一个button：
<form method="post" >
<input id="btn" type="button" value="Ajax传递json数据">
</form>
js的代码如下：
$('#btn').click(function () {
$.ajax({
url:"/index/",
type:"post",
//告诉服务器本次数据编码用json格式
contentType:'application/json',
//对数据进行json序列化
data:JSON.stringify({a:1, b:2}),
success:function (data) {
console.log(data)
}
})
});
过程详解
这里，我们给button定义一个click事件，在进行ajax操作的时contentType格式定义为'application/json'，也就是说告诉服务器本次数据编码用json格式，接着将需要传递的数据进行json的序列化，然后传给后台。
在视图函数中，我们打印两个数据:request.body与request.POST，需要注意：request.POST仅有在contentType为urlencoded的时候才有值，如果前端传递的数据格式为json的时候只能在request.body中看到数据。视图函数中打印的结果如下：
我们在浏览器中的NetWork中可以查看到contentType的值为json:
一个小问题
在前端部分，如果我们把input的type由button改为submit的话，上面的结果会出现下面的结果：
上面可以看到，我们的视图函数将body与POST结果打印了两次，而且contentType的值竟然变成了urlencoded！
这是因为submit会自动提交一次，而且“结果”会有异常：明明浏览器中的contentType的值变成了urlencoded，但是POST仍然打印不出来值！
因此，如果表单在点击提交按钮后需要用JS进行处理（包括输入验证）后再提交的话，通常都必须把submit改成button，即取消其自动提交的行为，否则，将会造成提交两次的效果！
关于submit和button的区别这里转载其他作者的一篇文章供大家查阅：
http://blog.sina.com.cn/s/blog_693d183d0100uolj.html
将数据传给前端
当然，如果我们想将数据传给前端，可以加一条input<input type="text" id="hh">，然后在js中这样写即可：
$('#btn').click(function () {
$.ajax({
url:'',
type:'post',
//告诉服务器本次数据编码用json格式
contentType:'application/json',
//对数据进行json序列化
data:JSON.stringify({a:1,b:2}), //application/json
success:function (data) {
console.log(data);
$('#hh').val(data)
}
})
})
效果如下：
