Django-Ajax
Ajax准备知识-json
1.什么是json
json用来做不同语言之间的数据交换，是不同语言之间交流的桥梁,以前都用xml
{ name: "张三", 'age': 32 } // 属性名必须使用双引号
[32, 64, 128, 0xFFF] // 不能使用十六进制值
{ "name": "张三", "age": undefined } // 不能使用undefined
{ "name": "张三",
"birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
"getName": function() {return this.name;} // 不能使用函数和日期对象
}
2.json做序列化
python <<===>> json
import json json.dumps() 序列化 python ===>> json json.loads() 反序列化
js <<====>> json
JSON.stringify() 序列化
JSON.parse() 反序列化
Ajax简介
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
也是客户端给服务端发送请求的一种方式
form表单
a标签
地址栏
ajax
两个特点：
异步 不等待服务器返回结果 继续干别的事情
局部刷新 url不变
使用ajax的步骤
1.确定事件
ajax不会闲的没事自己触发执行，需要事件去触发执行呢
例如：放在button的click事件中 <button class="ajax1">ajaxsend</button><span class="info"></span> <script> $('button').click(function () { $.ajax({ url:'/sendajax/', type:'get', success:function (data) { $('.info').html(data) } }) }) </script>
2.格式以及必要参数
$().ajax({ url:'/sendajax/', #必选参数 路径 success:function () {} #必选参数 如果成功的话就执行函数 (data)接收的是服务端返回给客户端的数据 type:'get' or 'post' #默认为get 大小写均可 data:{ #发送给服务端的数据 自己组建键值对 "k1":"v1", "k2":"v2" } })
3.ajax的参数
$().ajax({ url:'/sendajax/', #必选参数 路径 success:function () {} #必选参数 如果成功的话就执行函数 (data)接收的是服务端返回给客户端的数据 type:'get' or 'post' #默认为get 大小写均可 data:{ #发送给服务端的数据 自己组建键值对 当前ajax请求要携带的数据，是一个json的object对象，ajax方法就会默认地把它编码成某种格式 "k1":"v1", "k2":"v2" }
error: function (jqXHR, textStatus, err)
{
// jqXHR: jQuery增强的xhr
// textStatus: 请求完成状态
// err: 底层通过throw抛出的异常对象，值与错误类型有关 err是错误信息
console.log(arguments); }, })
比较重要的一个参数 contentType
contentType 告诉服务器我客户端的数据是以什么编码发过去的 注意注意：这里(客户端)用什么编码，服务器就用什么解码 默认值: contentType:"application/x-www-form-urlencoded", 数据格式：?user=alex&pwd=123 其他方式: contentType:"application/json", 数据格式：{"user":"alex","pwd":"123"} 字典格式 双引号 服务端取数据： 这样取出来的数据并不是元数据，是字典，是经过包装的 name=request.POST.get('name') pwd=request.GET.get('pwd') #{"user":"alex","pwd":"123"} 我们直接取出的数据，经过了Django的处理 处理过程基本是 服务端识别客户端的编码 "application/x-www-form-urlencoded" 通过request.body() 拿到的数据是：?user=alex&pwd=123 然后Django自己处理数据格式 我们通过 name=request.POST.get('name') pwd=request.GET.get('pwd') #{"user":"alex","pwd":"123"} 拿到的是字典 也就是Django从request.body()里 处理好格式的数据 ##注意 request.POST/GET.get() 这种取值的方式对应的就是客户端使用"application/x-www-form-urlencoded"这种编码，如果换了，用这种方法可就不一定能取出值来了 但是request.body()是一定可以的，这里可是元数据哦 如果用 "application/json" 这种方式发送数据 发送的是json字符串 首先用request.POST/GET.get() 肯定是拿不到数据了 现在客户端发给服务端的是json字符串，服务端拿到的是json字符串，服务端不认识json数据，需要 import json obj=request.body() #b’name=yuan&pwd=123' 是个bytes类型 json.loads(obj) 反序列化 对比一下： request.POST # <QueryDict:{'name':['yuan'],'pwd':'[123]'}> request.GET # <QueryDict:{'name':['yuan'],'pwd':'[123]'}> request.body # b’name=yuan&pwd=123' 是个bytes类型
小例子 有点小问题
客户端： $.ajax({ url:'/login/', type:'post', contentType:"application/json", #告诉人家用json了 data:JSON.stringify( #data数据就得用json JSON.stringify()序列化 我还以为自己会序列话呢 还得我自己序列化 { name:name, pwd:pwd, } ), 服务端： s=request.body.decode('utf8') #变成json字符串了 不是json的字节了 import json d=json.loads(s) #我去 发序列化了一下咋就成字典了呢 还是要自己试试呢 print(d['name'])
解决csrf Django针对post的安全机制
如果是form表单 直接在表单里增加 {% csrf_token %} 这个就好了
方式一：
个人觉得用这个方便
添加请求头 就不是data里的值了 <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script> ##这里走的是cdn 应该导入文件 $.ajax({ headers:{"X-CSRFToken":$.cookie('csrftoken')}, })
#实现原理：通过jquery操作cookie拿到key对应的值
方式二：
$.ajax({ data:{ csrfmiddlewaretoken:$('[name="csrfmiddlewaretoken"]').val() },
实现的原理：
在html的某一个位置 写上 {% csrf_token %} 这样会在页面渲染一个 这样的input标签
<input type="hidden" name="csrfmiddlewaretoken"
value="fQLSrDayErQNNzyvxLNa7WcmHKuJtwOxdjUmqOymnLUOkGFJDwGwFRshOjFoamHO">
通过在data里的设置拿到key-csrfmiddlewaretoken对应的value，key不变，主要就是拿到固定key对应的value这个随机字符串
方式三：
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script> $.ajax({ data:{ csrfmiddlewaretoken:$.cookie("csrfmiddlewaretoken") }, 或者： <script src="{% static 'js/jquery.cookie.js' %}"></script> $.ajax({ headers:{"X-CSRFToken":$.cookie('csrftoken')}, }) 实现原理：
利用jquery操作cookie拿到key-csrfmiddlewaretoken对应的value
