一、初识ajax
1.下载引入jQuery 2.$.ajax({ url:'/../', type:'GET', data: 1.value不能字典 {'k1':'v1','k2':[1,2,3,],'k3':JOSN.stringify({})} 2.$('').serialize() dataType:'JSON',#text,html,xml traditional:true, success:function(arg){ //arg是对象 } error:function(){ } })
二、django中应用Ajax流程
1.创建project --django_ajax 2.创建APP --app01 3.配置 --静态文件 --模板路径 4.students -->students.html 5.Bootstrap:提供现成的样式 + 效果 6.FontAwesome:提供图标 7./students/ -->students函数(班级和学生列表) -->students.html 8.$.ajxa({ url:'/../', type:'POST', data:{..}, seccess:function(arg){ //arg字符串 // var obj = JSON.parse(arg) } })
三、序列化
python序列化 字符串 = json.dumps(对象) --对象 ->字符串 对象 = json.loads(字符串) --字符串 ->对象 javascript: 字符串 = JSON.stringify(对象) 对象 ->字符串 对象 = JSON.parse(字符串) 字符串->对象 应用场景 数据传输时 发送:字符串 接收:字符串 -> 对象
JSON.stringify(字典) == json.dumps JSON.parse(字符串) == json.loads a = {'k':'v','k1':'v1'} {k: "v", k1: "v1"} str = JSON.stringify(a) "{"k":"v","k1":"v1"}" json_str = JSON.parse(str) {k: "v", k1: "v1"}
四、ajax
ajax结构
$.ajax({ url:'/../', type:'GET', data:{}, dataType:'JSON', success:function(arg){ //arg是对象 } })
ajax中的data
a.只是字符串或数字 $.ajax({ url:'/../', type:'GET', data:{‘k1':'v1'}, dataType:'JSON', success:function(arg){ //arg是对象 } }) b.包含数组 $.ajax({ url:'/../', type:'GET', data:{'k1':[1,2,3,4}, dataType:'JSON', traditional:true, success:function(arg){ //arg是对象 } }) c.传字典 $.ajax({ url:'/../', type:'GET', data:{'k1':JSON.stringify({})}, dataType:'JSON', success:function(arg){ //arg是对象 } })
补充:获取表单数据
注:获取表单内容:-var data = $('form表单的ID').serialize(); $,ajax({ ... data:$('form表单的ID').serialize(),
五、url请求和ajax请求对比
新URL方式: -独立的页面 -数据量大,条目多 问题:提交时,保留之前的内容??? 对话框方式: -数据量小或条目少 -增加,编辑 -Ajax:考虑,当前页:td中自定义属性 -页面(***) 删除: 对话框
六、Ajax本质
基于XMLHttpRequest -jQuery '伪'Ajax -iframe -form表单
七、Ajax上传文件 --django_ajax,django_form,django_file
-原生 -jQuery 以上两种方式可利用formData对象,来封装用户提交的数据 -iframe+form:兼容性好 *****iframe+form****8
猛击下载
八、jsonp实现跨域:只能处理get请求
浏览器的同源策略: XMLHttpRequest 巧妙的机制:JSONP JSONP:利用创建script块,在期中执行src属性为:远程url 函数(返回值)
function submitJsonp1() { var tag = document.createElement('script'); tag.src = 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403'; $(document.head).append(tag); document.head.removeChild(tag); } function list(arg) { console.log(arg); } function submitJsonp2() { $.ajax({ url:'http://www.jxntv.cn/data/jmd-jxtv2.html?_=1454376870403', type:'GET', dataType:'jsonp', jsonp:'callback', jsonpCallback:'函数', }) }
九、CORS实现跨域
原理:返回信息的时候加上一个特殊的响应头
django实现:在中间件中加一个响应头
中间件配置:api.cors
from django.utils.deprecation import MiddlewareMixin class CORSMiddleware(MiddlewareMixin): """ cors跨域实现简答请求 跨域:向不同域名或端口不同的地址发送请求) """ def process_response(self, request, response): # 添加响应头 # 允许你的域名来获取我的数据 response['Access-Control-Allow-Origin'] = "*" # 允许你携带Content-Type请求头 response['Access-Control-Allow-Headers'] = "Content-Type" # 允许你发送DELETE,PUT response['Access-Control-Allow-Methods'] = "DELETE,PUT" return response
settings添加配置
MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'django.middleware.common.CommonMiddleware', 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware', 'api.cors.CORSMiddleware', ]