预备知识:
什么是Json?
定义:json是一种轻量级的数据交换格式。
如果我们要在不同的编程语言中传递对象,就必须把对象序列化为标准格式,比如XML,但那是以往的时代,现在大多数使用序列化为json,因为json本身就是一个字符串,层次清晰,易阅读可以被所有语言读取,也方便的存储到磁盘和网络传输。
格式:一个无序的key:value集合。{"k1":"v1","k2":"v2"}
在程序运行过程中。所有的变量都是存在内存中。一旦程序结束,变量也会被销毁。
所以:
序列化:我们把变量从内存中变成可存储或者可传输的过程称为序列化
反序列化:把变量内容从序列化的对象重新读取到内存里称为反序列化
在js里面有两个常用方法实现json字符串和json对象互转
json对象---json字符串
JSON.stringify():
console.log(JSON.stringify({'name':'xjm'));
json字符串---js对象
JSON.parse()
console.log(JSON.parse('{"name":"xjm})');
注意:
json对象属性名必须是双引号
不能使用undefined;
不能是函数和日期对象
Ajax
ajax:翻译成中文就是异步JavaScript和XML。就是使用JavaScript语言与服务器进行异步交互,传输的数据为xml,当然现在不只是xml,更多的是使用Json数据
特点:
异步交互:客户端发出一个请求后,无需等服务器响应结束,就可以发出第二个请求
局部刷新:给用户的感受是在不知不觉中完成请求和响应过程,无需刷新整个页面
场景:
注册的错误提示:该用户已注册、该用户名已被使用等
百度等搜索引擎的输入框提示:输入一个python关键词后会出现一个下拉列表,这里用到了ajax技术,当输入框输入变化时,浏览器会偷偷向服务器发送一个请求,然后接收响应显示。
基于Jquery的Ajax实现
1 <button class="send_Ajax">send_Ajax</button>
2 <script>
3
4 $(".send_Ajax").click(function(){
5
6 $.ajax({
7 url:"/handle_Ajax/",
8 type:"POST",
9 data:{username:"Yuan",password:123},
10 success:function(data){
11 console.log(data)
12 },
13 error: function (jqXHR, textStatus, err) {
14 console.log(arguments);
15 },
16
17 complete: function (jqXHR, textStatus) {
18 console.log(textStatus);
19 },
20
21 statusCode: {
22 '403': function (jqXHR, textStatus, err) {
23 console.log(arguments);
24 },
25
26 '400': function (jqXHR, textStatus, err) {
27 console.log(arguments);
28 }
29 }
30 })
31 })
32 </script>
$.ajax()参数
请求参数:
url:请求路径
type:请求类型,默认get
data:{a:1,b:2} ajax默认get请求 默认urlencoded编码类型提交数据 /?a=1&b=2
processData:声明当前的data数据是否进行转码或预处理 默认True
contentType:发送数据时的编码类型
请求头ContentType
是指请求体的编码类型,常见的有三种:
1、application/x-www-form-urlencoded
最常见的post提交数据的方式,form表单如果不设置enctype属性,那么默认就是这种方式提交
POST http://www.123@qq.com HTTP:/1.1
Content-Type:application/x-www-form-urlencoded;charset=utf-8
username=jzy&age=22
2 、multipart/form-data
这也是一个常见的post提交数据的方式。我们使用表单上传文件时,必须在form中添加enctype=multipart/form-data/
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png
3、application/json
这个作为响应头大家应该不陌生,但是现在越来越多的人把它作为请求头。用来告诉服务端消息主体是序列化后的json字符串。
响应参数:
dataType:预期服务端返回的数据类型,服务端返回的数据会根据这个值解析后,传递给回调函数。
csrf跨站请求伪造
1 data:{
2 "csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val();
3 }
4
5 $.ajax({
6 headers:{"X-CSRFToken":$.cookie('csrftoken')}
7 })
基于form表单的文件上传
模板部分:
<form action="" method="post" enctype="multipart/form-data">
用户名 <input type="text" name="user">
头像 <input type="file" name="avatar">
<input type="submit">
</form>
视图部分:
def index(request):
print(request.body) # 原始的请求体数据
print(request.GET) # GET请求数据
print(request.POST) # POST请求数据
print(request.FILES) # 上传的文件数据
return render(request,"index.html")
基于Ajax的文件上传
1 模版部分
2 <h3>基于Ajax文件上传</h3>
3 <form>
4 用户名:<input type="text" id="user">
5 密码:<input type="password" id="pwd">
6 <p>头像:<input type="file" id="head_imgurl"></p>
7 <!--input 的type类型一定不能是submit-->
8 <input type="button" value="Json" class="json按钮">
9 <input type="button" value="Ajax" class="ajax按钮">
10 </form>
11
12 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
13 <script>
14
15 //发送json数据
16 $('.json').click(function () {
17 $.ajax({
18 url: '',
19 type: 'post',
20 contentType: 'application/json',
21 data: JSON.stringify({
22 a: 1,
23 b: 2
24 }),
25 success: function (data) {
26 console.log(data)
27 }
28 })
29 });
30
31 //ajax文件上传
32 $('.ajax').click(function () {
33 var formdata=new FormData();
34 formdata.append("user",$('#user').val());
35 formdata.append("pwd",$('#pwd').val());
36 formdata.append("head_imgurl",$('#head_imgurl')[0].files[0])
37 $.ajax({
38 url:'',
39 type:'post',
40 contentType:false, // 不设置内容类型
41 processData:false, // 不处理数据
42 data:formdata,
43 success:function (data) {
44 console.log(data);
45 }
46 })
47 })
48 </script>
49 视图部分
50 def file_put(request):
51 if request.method == 'POST':
52 print(request.body) # 请求报文
53 print(request.POST) # 只有请求头是urlencoded时,才有数据
54
55 # data = request.body.decode('utf-8')
56 # import json
57 # print(json.loads(data).get('a'))
58 # print(json.loads(data).get('b'))
59
60
61 # user = request.POST.get('user')
62
63 # 获取文件对象
64 file_obj = request.FILES.get('head_imgurl')
65
66 # 文件名称:file_obj.name
67 with open(file_obj.name,'wb') as f:
68 for line in file_obj:
69 f.write(line)
70 return HttpResponse('ok')
71
72 return render(request,'file_put.html')