AJAX和JSON学习笔记
1.关系映射 - 多对多
对象名 = db.Table(
'关联表名',
db.Column('id',db.Integer,primary_key=True),
db.Column('外键列名',db.TYPE,db.ForeignKey('主表.主键')),
db.Column('外键列名',db.TYPE,db.ForeignKey('主表.主键'))
)
关联属性以及反向引用关系：
在任意一个实体中：
关联属性名=db.relationship(
'关联的实体类',
secondary='关联的第三张表名',
lazy='dynamic',
backref=db.backref(
'反向引用属性名',
lazy='dynamic'
)
)
2.cookies
1.保存cookie到客户端
响应对象.set_cookie(key,value,max_age)
2.获取cookie的值
request.cookies
包含了当前站点对应的所有的cookies的值
request.cookies['key']
request.cookies.get('key')
判断数据是否在cookies中：
if key in request.cookies:
数据在cookies中
else:
数据不在cookies中
3.删除cookie的值
响应对象.delete_cookie()
3.session
1.session在Flask中的实现
1.配置 SECRET_KEY
app.config['SECRET_KEY'] = 'xieshadouxing'
2.使用session
from flask import session
1.向session中保存数据
session['key'] = value;
2.从session中获取数据
value = session['key']
3.从session中删除数据
del session['key']
=======================================================
AJAX - 阿贾克斯
1.什么是AJAX
Asynchronous Javascript And Xml
Asynchronous : 异步的
同步访问：
当客户端向服务器发送请求时，服务器在处理过程中，浏览器只能等待，效率偏低
异步访问：
当客户端向服务器发送请求时，服务器在处理过程中，客户端可以做其他的操作，不需要一直等待，效率偏高
Xml：eXtensible Markup Language
可扩展的 标签 语言
AJAX优点：
1.异步 访问
2.局部 刷新
AJAX的使用场合：
1.搜索建议
2.表单验证
3.前后端完全分离
2.AJAX的核心对象-异步对象(XMLHttpRequest)
1.什么是XMLHttpRequest
简称为"xhr"
称为"异步对象"，代替浏览器向服务器发送请求并接收响应
xhr 是由JS来提供
2.创建异步对象(xhr)
主流的异步对象是 XMLHttpRequest 类型的，并且主流浏览器都支持(IE7+,Chrome,Firefox,Safari,Opera)全部支持。但在IE低版本浏览器中(IE6以及以下)，就不支持XMLHttpRequest,需要使用 ActiveXObject() 来创建异步对象
支持 XMLHttpRequest ：
new XMLHttpRequest()
不支持 XMLHttpRequest ：
new ActiveXObject("Microsoft.XMLHTTP")
练习：
1.创建Flask项目 - Ajax01
2.创建访问路径 /01-xhr,并去往 01-xhr.html 模板
3.在模板中
创建一个按钮，单击时，通过一个 js方法，根据浏览器创建 xhr 对象并返回
3.xhr的成员
1.方法 - open()
作用：创建请求
语法：open(method,url,async)
method : 请求方法，取值为'get'或'post'
url : 请求地址，字符串
async : 是否采用异步的方式发送请求
true : 使用异步方式发送请求
false : 使用同步方式发送请求
ex:
xhr.open('get','/server',true)
2.属性 - readyState
作用：请求状态，通过不同的请求状态值来表示xhr与服务器的交互情况
由0-4共5个值来表示5个不同的状态
0 : 请求尚未初始化
1 : xhr已经与服务器建立连接
2 : 服务器端已经开始接收请求
3 : 请求正在处理中
4 : 响应已完成
3.属性 - status
作用：表示服务器端的响应状态码
200：表示服务器正确处理所有的请求以及给出响应
404：请求资源不存在
500：服务器内部错误
4.属性 - responseText
作用：服务器端的响应数据
5.事件 - onreadystatechange
作用：每当xhr的readyState属性值发生改变的时候要触发的操作 - 回调函数
在该函数中，只有当readyState的值为4并且status的值为200的时候，就可以正常的接收 responseText 了
6.方法 - send()
作用：通知xhr向服务器端发送请求
语法：send(body)
body : 表示请求的主体
get请求：是没有请求主体的，所以body的值为null
xhr.send(null)
post请求：是有请求主体的，所以body的位置处要表示请求数据
xhr.send("请求数据")
xhr.send("参数=值&参数=值")
4.AJAX的操作步骤
1.GET请求
1.创建 xhr 对象
2.创建请求 - open()
3.设置回调函数 - onreadystatechange
判断状态并且接收数据
4.发送请求 - send()
2.GET 请求传递参数
//1.获取 xhr
//2.创建请求
xhr.open('get','/02-server?name=value&name=value',true)
//3.设置回调函数
//4.发送请求
服务器端：
使用 request.args.get('name')接收请求参数
3.POST请求
1.请求提交的数据要作为 send() 的参数进行提交
xhr.send("参数=值&参数=值");
2. 修改请求消息头
在AJAX中，提交POST请求时，AJAX默认将Content-Type请求消息头的值修改为 "text/plain" 了，所以导致数据无法正常提交
解决方案：将Content-Type的请求消息头再修改回"application/x-www-form-urlencoded"即可
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
练习：
1.创建数据库 - ajax
2.创建实体类 - Users ，映射成表
id - 主键，自增
loginname - 登录名称
loginpwd - 登录密码
uname - 用户名称
3.使用ajax验证登录名称是否存在
xxx
request.args.get()
AJAX:
1.AJAX核心对象 - XMLHttpRequest
function getXhr(){
if(window.XMLHttpRequest)
return new XMLHttpRequest();
else
return new ActiveXObject("Microsoft.XMLHTTP");
}
2.xhr的成员
1.方法 - open()
目的：创建请求
语法：open(method,url,async)
2.属性 - readyState
目的：表示xhr与服务器之间的交互状态
取值：0-4
4：响应完成
3.属性 - status
目的：表示服务器自身的响应状态码
取值：标准的HTTP响应码
200：服务器正常响应所有内容
4.属性 - responseText
目的：响应内容
5.事件 - onreadystatechange
目的：监控xhr的请求状态
取值：函数
只有当readyState的值为4并且status的值为200的时候才正常的接收数据
6.方法 - send()
目的：发送请求
语法：send(body)
get : send(null)
post : send("name=value&name=value")
7.方法 - setRequestHeader()
目的：设置请求消息头
语法：setRequestHeader(name,value)
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
3.AJAX操作步骤
1.GET请求
1.创建/获取 xhr
2.创建请求
3.设置回调函数
4.发送请求
注意：如果有请求提交数据的话需要在 url 的后面拼查询字符串
2.POST请求
1.创建/获取 xhr
2.创建请求
3.设置回调函数
4.设置 Content-Type 的请求消息头
5.发送请求
注意：如果有请求提交数据的话需要在 send() 中传递数据
1.JSON
1.JS 对象
语法：
1.通过一对 {} 表示一个对象
2.在 {} 中允许通过 key:value 的形式来表示属性
3.多对的属性和值之间使用 , 隔开
var obj = {
name:'MrWang',
age:37,
gender:'Unknown'
}
2.什么是JSON
JavaScript Object Notation
表现形式
按照JS对象的格式所构建出来的字符串就是JSON串
在ajax中，允许将复杂格式的响应数据(如列表等)构建成JSON格式的字符串再进行响应输出
3.JSON的表现
1.JSON表示单个对象
1.使用 {} 表示单个对象
2.在{}中使用key:value的格式表示数据
3.多对属性和值之间使用 , 隔开
4.key必须使用""引起来
5.value如果是字符串的话，也需要用""引起来
ex:
var obj = {
"name":"MrWang",
"age":37,
"gender":"Unknown"
}
var str = '{"name":"MrWang","age":37,"gender":"Unknown"}';
2.JSON表示多个对象
1.使用[](数组)来表示多个对象
2.数组中允许包含多个JSON对象 或 字符串
1.使用JSON数组来表示若干字符串
var arr = ["王老师","王夫人","王小超"];
var str = '["王老师","王夫人","王小超"]';
2.使用JSON数组来表示若干对象
var arr = [
{
"name":"王老师",
"age":37,
"gender":"男"
},
{
"name":"王夫人",
"age":15,
"gender":"男"
}
];
var str = '[
{
"name":"王老师",
"age":37,
"gender":"男"
},
{
"name":"王夫人",
"age":15,
"gender":"男"
}
]';
4.使用jq的each()迭代数组
1. $.each();
语法：
$.each(arr,function(index,obj){
//index : 遍历出来的元素的下标
//obj : 表示遍历出来的元素
});
2. $obj.each();
语法：
$obj.each(function(index,obj){
//index : 遍历出来的元素的下标
//obj : 表示遍历出来的元素
});
该函数用于循环遍历 $obj 元素
2.后台处理JSON
在后台查询数据时，需要先将数据转换为JSON格式的字符串，再响应给客户端。到了前端后再将字符串转换为JS对象再进行解析。
1.步骤
1.后台先获取数据
数据类型为:
1.元组
2.列表
3.字典
2.在后台将数据转换为符合JSON格式的字符串
3.在后台将JSON格式字符串进行响应
4.在前端将JSON格式的字符串解析成JS对象
2.Python中的JSON处理
使用 Python 中的 json 类可以完成转换
import json
jsonStr = json.dumps(元组|列表|字典)
return jsonStr
3.前端中的JSON处理
通过以下方式，将JSON的串转换为JS对象或数组
在JS中：js对象/数组 = JSON.parse(JSON串)
JSON:JavaScript Object Notation
1.语法
1.使用{}括起来
2.使用key:value来描述属性(数据)
3.key必须使用""引起来
4.value如果是字符串的话也必须使用""引起来
5.多个key:value之间使用 , 隔开
2.后端处理
1.允许转换成JSON的类型
1.字典
2.列表
3.元组
在实体类中，编写一个方法将实体对象转换成字典，以便于方便的转换成JSON
class Users(db.Model):
... ...
def to_dict(self):
dic = {
loginname:self.loginname
}
return dic
2.将元素装换为JSON字符串
import json
jsonStr=json.dumps(dic/tup/list)
3.前端处理
将后端得到的JSON字符串转换成JS对象，再解析
JSON.parse(str)
4.使用JQ的each函数进行数组的迭代
1.$.each(arr,function(i,obj){})
2.$arr.each(function(i,obj){});
1.JQUERY AJAX
1.$obj.load(url,data,callback);
作用：异步加载数据到$obj元素中
参数：
1.url：异步请求的地址
2.data：传递给服务器端的参数(可选)，该数据将决定请求方法是什么。
1.可以传递普通的字符串
"name=MrWang&age=30"
2.可以是JSON对象
{
"name":"MrWang",
"age":30
}
3.callback：异步请求成功后的回调函数(可选)
取值为 匿名函数
function(resText,statusText){
resText : 响应数据
statusText : 响应的状态文本
}
JSON:JavaScript Object Notation
1.语法
1.使用{}括起来
2.使用key:value来描述属性(数据)
3.key必须使用""引起来
4.value如果是字符串的话也必须使用""引起来
5.多个key:value之间使用 , 隔开
2.后端处理
1.允许转换成JSON的类型
1.字典
2.列表
3.元组
在实体类中，编写一个方法将实体对象转换成字典，以便于方便的转换成JSON
class Users(db.Model):
... ...
def to_dict(self):
dic = {
loginname:self.loginname
}
return dic
2.将元素装换为JSON字符串
import json
jsonStr=json.dumps(dic/tup/list)
3.前端处理
将后端得到的JSON字符串转换成JS对象，再解析
JSON.parse(str)
4.使用JQ的each函数进行数组的迭代
1.$.each(arr,function(i,obj){})
2.$arr.each(function(i,obj){});
1.JQUERY AJAX
1.$obj.load(url,data,callback);
作用：异步加载数据到$obj元素中
参数：
1.url：异步请求的地址
2.data：传递给服务器端的参数(可选)，该数据将决定请求方法是什么。
1.可以传递普通的字符串
"name=MrWang&age=30"
2.可以是JSON对象
{
"name":"MrWang",
"age":30
}
3.callback：异步请求成功后的回调函数(可选)
取值为 匿名函数
function(resText,statusText){
resText : 响应数据
statusText : 响应的状态文本
}
2.$.get()
1.语法：
$.get(url,data,callback,type)
2.参数详解
1.url：异步请求地址
2.data：异步请求的参数
1.字符串 ：name=value&name=value
2.JSON ：{"name":"value","name":"value"}
3.callback：请求成功时的回调函数
function(resText){
resText:表示就是响应成功后的响应数据
}
4.type：响应回来的数据的类型
1.html ：响应回来的数据是html文本
2.text ：响应回来的数据是text文本
3.json ：响应回来的数据是JSON对象
4.script ：响应回来的数据是js脚本代码
注意：如果此处指定了类型的话，那么在callback中，就无需再做类型的转换
3.$.post()
4.$.ajax()
作用：自定所有的ajax行为
语法：$.ajax({ajax设置的参数数据对象});
参数们：
1.url : 字符串，表示异步请求的地址
2.type : 字符串，请求方式 (get,post)
3.data : 传递到服务器端的参数
1.字符串 ："name=value&name=value"
2.JSON对象 ：{"name":"value"}
4.dataType :字符串，响应回来的数据的格式
1.html
2.xml
3.text
4.script
5.json
6.jsonp ：有关跨域的响应格式
5.success : 回调函数，请求和响应成功时的回调函数
function(data){
data : 表示服务器端响应回来的数据
}
============================================
6.error : 回调函数，请求或响应失败时的回调函数
7.beforeSend : 回调函数，在发送ajax请求之前的回调函数，如果return false的话则表示终止本次请求
2.跨域 - Cross Domain
1.什么是跨域
HTTP协议中 - 同源策略
同源：多个地址中，相同协议，相同域名，相同端口被视为“同源”
在HTTP中，必须是同源地址才能相互发送请求，非同源地址被拒绝的(
