目录
day07回顾
1.cookie
- 保存cookie的值到浏览器
响应对象.set_cookie(key,value,max_age) - 获取cookie的值
request.cookies:类型为字典
request.cookies['get']
request.cookies.get('get','')
if 'get' in request.cookies:
... ... - 删除cookie的值
响应对象.delete_cookie('key')
2.session
from flask import session
app.config['SECRET_KEY'] = 'xxxx'
- 保存session的值
session['key'] = 值 - 获取session的值
session['key'] - 删除session的值
del.session['key']
3.XMLHttpRequest - xhr
- 作用
代替浏览器异步的向服务器发送请求并接受响应 - 创建 xhr
主流浏览器:XMLHttpRequest
IE6-:ActiveXObject('Microsoft.XMLHTTP')
1.AJAX
- 创建 xhr
- xhr 的成员
- 方法 - open()
作用:创建请求
语法:open(method,url,asyn)
method:请求方式,取值‘get’或‘post’
url:请求地址,字符串
asyn:是否采用异步的方式
true:异步(默认)
false:同步
ex:
xhr.open('get','/server',true); - 属性 - readyState
作用:请求状态,通过不同的请求状态来表示xhr与服务器的交互情况
由0-4共5个值来表示5个不同的状态
0:请求尚未初始化
1:已经与服务器建立连接
2:服务器端已接收请求
3:请求正在处理中
4:响应已经完成 - 属性 - status
作用:服务器端的响应状态码
200:表示服务器正确处理所有的请求以及给出响应
404:请求资源不存在
500:服务器内部错误
... ... - 事件 - onreadystatechange
作用:每当xhr的readyState发生改变的时候都要触发的操作 - 回调函数
只有当readyState的值为4并且status的值为200的时候,才可以正常的去接收响应数据 - 属性 - responseText
作用:响应数据 - 方法 - send()
作用:通知xhr向服务器端发送请求
语法:send(body)
get请求:body的值为null
send(null)
post请求:此处为要提交的数据
send('请求数据')
- 方法 - open()
- AJAX的操作步骤
- GET请求
- 创建 xhr 对象
- 创建请求 - open()
- 设置回调函数 - onreadystatechange
判断状态并接收响应数据 - 发送请求 - send()
请求参数:
推荐:请求地址后拼QueryString
xhr.open('get','02-server?key=value&key=value',true)
- POST请求
ajax的post请求,会把 Content - Type 请求消息头的值修改为 ‘text/plain;charset=utf-8’,导致了服务器端没有办法正常接收数据
解决方法:将Content-Type 请求消息头的值再更改回 application/x-www-form-urlencoded 即可
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
- GET请求
2.JSON
- JSON介绍
JSON:JavaScript Object Notation
JS 对象 表现形式
在ajax中,允许将 复杂格式的响应数据 构建成 JSON的格式再进行响应输出 - JSON表现
- JSON表示单个对象
- 使用 {} 表示单个对象
- 在 {} 中使用 Key:value 的形式来表示属性(数据)
- Key必须要用 " " 引起来
- value如果是字符串的话,也需要用" "引起来
ex:
var obj = {
"name":"王老师",
"age":30,
"gender":"Unknown"
}<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <button onclick="btnClick()">JSON</button> <script> function btnClick(){ var obj = { "name":"王老师", "age" : 30, "gender" : "Unknown" } console.log(obj.name); console.log(obj.age); console.log(obj.gender); } </script> </body> </html>
- JSON表示一个数组
- 使用 [] 表示一个数组
- 数组中允许包含若干JSON对象 或 字符串
- 使用JSON数组表示若干字符串
var arr = ["王大锤","王夫人","王二小"]; - 使用JSON数组表示若干对象
保存3个人的信息(name,age,gender)
var arr = [
{
"name":"王老师",
"age":30,
"gender":"男"
},
{
"name":"王夫人",
"age":28,
"gender":"女"
}
];
- 使用JSON数组表示若干字符串
- JSON表示单个对象
- 使用 jq 的 each() 迭代数组
- $arr.each();
$arr:jQuery中的数组
语法:
$arr.each(function(index,obj){
index:遍历出来的元素的下标
obj:遍历出来的元素
}); - $.each();
语法:
$.each(arr,function(index,obj){});
arr : js 中的普通数组
示例:<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script src="jquery-1.11.3.js"></script> <script> var arr = [ { "name":"王老师", "age":40, "gender":"男" }, { "name":"王夫人", "age":28, "gender":"男" } ]; /*for(var i=0;i<arr.length;i++){ var obj = arr[i]; console.log('姓名:' + obj.name); console.log('年龄:' + obj.age); console.log('性别:' + obj.gender); }*/ /*使用jquery 循环遍历 arr */ /*$(arr).each(function(i,obj){ console.log("下标为"+i+"的元素:"); console.log("姓名:"+obj.name); console.log("年龄:"+obj.age); console.log("性别:"+obj.gender); });*/ $.each(arr,function(i,obj){ console.log("下标为"+i+"的元素:"); console.log("姓名:"+obj.name); console.log("年龄:"+obj.age); console.log("性别:"+obj.gender); }); </script> </body> </html>
- $arr.each();
今日示例:
AjaxDemo1.py
from flask import Flask, render_template, request
import pymysql
from flask_sqlalchemy import SQLAlchemy
pymysql.install_as_MySQLdb()
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI']="mysql://root:123456@localhost:3306/flask";
db = SQLAlchemy(app)
class Users(db.Model):
__tablename__ = "users"
id = db.Column(db.Integer,primary_key=True)
uname = db.Column(db.String(50))
upwd = db.Column(db.String(50))
realname =db.Column(db.String(30))
@app.route('/01-getxhr')
def getxhr():
return render_template('01-getxhr.html')
@app.route('/02-get')
def get_views():
return render_template('02-get.html')
@app.route('/02-server')
def server02_views():
return "这是AJAX的请求"
@app.route('/03-get')
def get03_views():
return render_template('03-get.html')
@app.route('/03-server')
def server03_views():
uname = request.args['uname']
return "欢迎:"+uname
@app.route('/04-post')
def post_views():
return render_template('04-post.html')
@app.route('/04-server',methods=['POST'])
def server04_views():
uname = request.form['uname']
age = request.form['age']
return "姓名:%s,年龄:%s" % (uname,age)
@app.route('/05-post')
def post05_views():
return render_template('05-post.html')
@app.route('/06-checkname')
def checkname():
return render_template('06-checkname.html')
@app.route('/06-server',methods=['POST'])
def server06_views():
uname=request.form['username']
user = Users.query.filter_by(uname=uname).first()
if user:
return "用户名称已存在"
else:
return "通过"
if __name__ == '__main__':
app.run(debug=True)
common.js
/**
* Created by tarena on 18-9-30.
*/
function createXhr(){
if(window.XMLHttpRequest)
return new XMLHttpRequest();
else
return new ActiveXObject('Microsoft.XMLHTTP');
}
01-getxhr.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="getXhr()">测试xhr</button>
<script src="/static/js/common.js"></script>
<script>
function getXhr(){
var xhr = createXhr();
console.log(xhr);
}
</script>
</body>
</html>
02-get.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>
登录名: <input type="text" id="username">
<span id="show"></span>
</p>
<script SRC="/static/js/common.js"></script>
<script src="/static/js/jquery-1.11.3.js"></script>
<script>
$(function(){
$("#username").blur(function(){
//1.创建xhr
var xhr = createXhr();
//2.创建请求
xhr.open('post','/06-server',true);
//3.设置回调函数
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
$("#show").html(xhr.responseText);
}
}
//4.设置请求消息头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//5.发送请求
xhr.send("username="+$("#username").val());
});
});
</script>
</body>
</html>
03-get.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/js/common.js"></script>
<script src="/static/js/jquery-1.11.3.js"></script>
</head>
<body>
姓名:<input type="text" id="uname">
<button id="btnSend">发送AJAX请求</button>
<p id="show"></p>
<script>
$(function(){
$("#btnSend").click(function(){
//1.创建xhr
var xhr = createXhr();
//2.创建请求
var url = "/03-server?uname="+$("#uname").val();
xhr.open('get',url,true);
//3.设置回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
$("#show").html(xhr.responseText);
}
}
//4.发送请求d
xhr.send(null);
});
});
</script>
</body>
</html>
04-post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btnPost">发送POST请求</button>
<p id="show"></p>
<script src="/static/js/common.js"></script>
<script src="/static/js/jquery-1.11.3.js"></script>
<script>
$(function(){
$("#btnPost").click(function(){
//1.获取xhr
var xhr = createXhr();
//2.创建请求
xhr.open('post','/04-server',true);
//3.设置回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
$("#show").html(xhr.responseText);
}
}
//设置Content-Type请求消息头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//4.发送请求
xhr.send("uname=sf.zh&age=85");
});
});
</script>
</body>
</html>
05-post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="/04-server" method="post" enctype="text/plain">
<p>
姓名 : <input type="text" name="uname">
</p>
<p>
年龄 : <input type="text" name="age">
</p>
<p>
<input type="submit">
</p>
</form>
</body>
</html>
06-checkname.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>
登录名: <input type="text" id="username">
<span id="show"></span>
</p>
<script SRC="/static/js/common.js"></script>
<script src="/static/js/jquery-1.11.3.js"></script>
<script>
$(function(){
$("#username").blur(function(){
//1.创建xhr
var xhr = createXhr();
//2.创建请求
xhr.open('post','/06-server',true);
//3.设置回调函数
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
$("#show").html(xhr.responseText);
}
}
//4.设置请求消息头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//5.发送请求
xhr.send("username="+$("#username").val());
});
});
</script>
</body>
</html>