Ajax传递json数据简介和一个需要注意的小问题

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)
            }
        })
    })

效果如下：