目录
1.AJAX回顾
1.AJAX : 异步的JS和XML
2.异步对象
XMLHttpRequest
成员:
1.open(method,url,asyn)
创建请求
2.readyState
xhr的请求状态
0-4 : 4表示的是已经接收响应
3.status
服务器端响应状态
200 : 表示服务器正常接收请求并给出响应
4.responseText
表示的是响应回来的数据
5.onreadystatechange
每当readyState的值发生变化的时候要回来调用的函数 - 回调函数
6.send()
发送请求
get请求 :send(null)
post请求:send("参数=值1&参数2=值2")
7.setRequestHeader(name,content)
设置请求消息头
发送post请求时:
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
3.使用 ajax 发送get请求
1.创建 xhr
2.创建 请求
请求参数要在url中体现出来
3.设置 回调函数
4.发送 请求
4.使用 ajax 发送 post 请求
1.创建 xhr
2.创建 请求
3.设置 回调函数
4.设置 Content-Type 请求消息头
5.发送 请求
一定要传递 csrfmiddlewaretoken 的值到服务器端
练习:
1.创建数据库 - ajax
2.创建 Models - User
uname - 用户名
upwd - 密码
uphone - 电话号
uemail - 电子邮件
2.JSON
1.JSON介绍
JSON:JavaScript Object Notation
JS 对象 表现形式
将复杂的数据按照JS对象的格式进行响应
2.JSON表现
1.JSON可以表示单个对象
1.使用 {} 表示单个对象
2.在{}中,使用key:value的形式来表示数据(属性)
3.key必须使用""引起来
4.value如果是字符串的话,也必须使用""引起来
var obj = {
"name":"范冰冰",
"age":40,
"gender":"女"
}
2.JSON可以表示一个数组
1.使用[]表示一个数组
2.在数组中允许包含若干普通数据 或 JSON对象
1.使用JSON数组表示普通数据
var arr = ["范冰冰","李晨","洪金宝"];
2.使用JSON数组表示若干对象
var arr = [
{
"name":"范冰冰",
"age":40,
"gender":"女"
},
{
"name":"李晨",
"age":43,
"gender":"男"
}
];
3.后台处理JSON
1.前后台JSON数据交互流程(后->前)
1.后台先获取数据
类型:
1.元祖
2.列表
3.字典
4.QuerySet
2.在后台将数据转换为符合JSON格式的字符串
3.在后台将JSON格式的字符串响应给前端
return HttpResponse(JSON格式字符串)
4.在前端,将响应回来的JSON串解析成JSON对象
2.Python(Django)中的JSON处理
1.元组,列表,字典
使用 Python 提供的json类就可以完成转换
import json
jsonStr=json.dumps(元组|列表|字典)
2.Django中的查询结果集 - QuerySet
使用 Django 提供的 序列化类 完成 QuerySet到 JSON字符串的转换
from django.core import serializers
jsonStr=serializers.serialize('json',QuerySet)
3.Django中查询单个对象
使用 Entry.objects.get(条件) 查询单条数据
是不允许被序列化成JSON格式的
1.方案1
使用Entry.objects.filter()来替换Entry.objects.get(),替换后则可以正常序列化
2.方案2
将 Entry.objects.get() 转换成字典后再json.dumps()
class User(models.Model):
uname = models.CharFiled()
upwd = models.CharFiled()
uphone = models.CharField()
uemail = models.CharField()
def to_dict(self):
dic={
"uname":self.uname,
"upwd":self.upwd,
"uphone":self.uphone,
"uemail":self.uemail
}
return dic
3.前端处理JSON
将后端响应回来的JSON字符串转换成JSON对象\
在JS中:
var JSON对象=JSON.parse(JSON字符串);
3.JQUERY AJAX
在 jquery 中提供了对 原生ajax 的封装操作
1.$obj.load()
作用:异步加载数据到$obj元素中
语法:$obj.load(url,data,callback)
1.url:异步请求的地址
2.data:传递给服务器端的数据(可选)
1.可以传递普通的字符串
"name=sf.zh&age=85"
2.可以传递JSON
{
"name":"sf.zh",
"age":85
}
3.callback:异步请求完成后的回调函数
function(resText,statusText){
resText : 响应数据
statusText : 响应的状态文本
}
1. $.get(url,data,callback,type)
1.url:异步请求的地址
2.data:请求提交的参数
3.callback:请求成功时的回调函数
function(data){
data:表示的是响应回来的数据
}
4.type:指定返回内容的格式类型
1.html:响应回来的内容是html文本
2.text:响应回来的内容是text文本
3.json:响应回来的内容是json对象
2.$.post(url,data,callback,type)
3.$.ajax()
特点：所有的操作都可以自己定制
语法：$.ajax({JSON对象});
JSON对象：
1.url:字符串，要异步请求的地址
2.type:字符串，提交方式，get或post
3.data:JSON对象或字符串，要传递到后台服务器的参数
4.dataType:字符串，指定响应回来的数据的类型
1.'html':响应回来的数据是html文本
2.'text':响应回来的数据是text文本
3.'script':响应回来的数据是javascript代码片段
4.'json':响应回来的数据是JSON对象
5.'xml':响应回来的数据是xml文档
6.'jsonp':JSONP格式，跨域时使用
5.success:请求和响应成功时的回调函数
success:function(data，textStatus){
data:响应数据
textStatus:响应状态文本
}
6.error:请求和响应出错时的回调函数
error:function(xhr,textstatus){
xhr:异步请求对象
textStatus:响应状态文本
}
7.async:指定是否是异步方式
true:使用异步方式
false:使用同步方式