首先介绍一下 前后端传输数据的编码格式
在这里主要讲解post请求数据的编码格式，因为我们知道get请求数据的方式很简单，就是直接将请求的数据放在url后面，例如：url?username=David&password=123。
最常见的朝后端发送post请求的方式有两种：1.form表单 2.ajax请求
前后端传输数据的编码格式有三种：1. urlencoded 2. formdata 3.json
#form表单数据传输：
默认的编码格式：urlencode 数据格式：username=David&password=123
django针对后端符合urlencoded编码格式的数据都会自动的封装到request.POST方法中 （username=jason&password=123 >>> request.POST）
在使用form表单向后台提交文件时候，将编码格式改成form-data(enctype="multipart/form-data")，那么针对普通的键值对还是解析到request.POST中，而将提交的文件内容解析到request.FILES中。如果不改编码格式，所提交的文件只能被request.POST拿到文件名，而request.FILES中没有任何数据。
#未将编码格式改成form-data格式request.POST和request.FILES中拿到的数据 <QueryDict: {'username': ['fangyu'], 'password': ['1243'], 'file': ['1mns.tif']}> <MultiValueDict: {}> #格式更改之后两种方法拿到的数据 <QueryDict: {'username': ['fangyu'], 'password': ['1243']}> <MultiValueDict: {'file': [<TemporaryUploadedFile: 1mns.tif (image/tiff)>]}>
form表单是没有办法发送json格式的数据
#ajax向后端发送数据
默认的编码格式也是urlencoded 数据格式:username=jason&age=20
django后端拿到数据之后，只要数据格式符合urlencoded编码格式的数据都会自动帮你解析封装到request.POST中 username=jason&age=20 >>> request.POST
前端代码
{#index.html中代码#}
<form action="" method="post" enctype="multipart/form-data"> <p>用户名：<input type="text" name="username" class="form-control"></p> <p>密码：<input type="text" name="password" class="form-control"></p> <p>文件：<input type="file" name="file"></p> {# <p><input type="submit" class="btn btn-success"></p>#} <input type="button" class="btn btn-danger" value="提交" id="d1"> </form> <script> $('#d1').click(function () { $.ajax({ url:'', type:'post', data:{'username':'fangyu','age':20}, success:function (args) { } }) }) </script>
后端代码
#viesw.py中代码 def index(request):
#一种新的request方法，判断请求方式是否为ajax请求 if request.is_ajax(): if request.method == 'POST': print(request.POST) print(request.FILES) return render(request,'index.html') #运行结果： <QueryDict: {'username': ['fangyu'], 'age': ['20']}> <MultiValueDict: {}>
文件内容并没有被后端拿到，那么ajax如何发送文件的呢？
接下来重点介绍使用ajax发送json格式数据（很重要!）
前后端在传输数据格式的时候一定要确保编码格式与所传数据的格式一致！
先看代码
{#前端代码#} <button id="d1" class="btn btn-primary">提交</button> <script> $('#d1').click(function () { $.ajax({ url:'', type:'post', data:JSON.stringify({'username':'fangyu','password':123}), contentType:'application/json',//指定编码格式 success:function (args) { alert(123) } }) }) </script>
#后端代码 def ab_json(request): if request.is_ajax(): # print(request.body)#b'{"username":"fangyu","password":123}' request.body返回的是一个二进制json数据 # 针对json格式数据需要你自己手动处理 json_bytes = request.body #json_str = json_bytes.decode('utf-8')#将二进制数据解码成json字符串 # json_dic = json_str.loads(json_str)#将json字符串反序列化成字典 #以上两步可以直接合成一步，原因：json.loads括号内如果传入了一个二进制格式的数据那么内部自动解码再反序列化 json_dict = json.loads(json_bytes) # {'username': 'jason', 'age': 25} <class 'dict'> print(json_dict, type(json_dict)) # {'username': 'jason', 'age': 25} <class 'dict'> return render(request,'ab_json.html')
ajax发送文件
利用ajax向后端提交文件数据
{#前端代码#}
<p>username:<input type="text" id="d1"></p> <p>password:<input type="text" id="d2"></p> <p><input type="file" id="d3"></p> <button class="btn btn-info" id="d4">点我</button> <script> //为按钮绑定一个点击事件 $('#d4').onclick(function () { var formDataObj = new FormData(); //为创建的对象添加普通数据 formDataObj.append('username',$('#d1').val()); formDataObj.append('password',$('#d2').val()); //为对象添加文件 formDataObj.append('myfile',$('#d3')[0].files()[0]); //将对象基于ajax发送给后端 $.ajax({ url:'', type:'post', //直接将要传输的对象放在data后面 data:formDataObj, contentType:false, //不需要任何编码格式，django后端能够自动识别foemdata对象 processType:false, //告诉你的浏览器不要对你的数据进行任何处理 success:function (args) { alert(123) } }) }) </script>
#后端代码 def ab_file(request): if request.is_ajax(): if request.method == 'POST': print(request.POST) print(request.FILES) return render(request, 'ab_file.html')