JOSN：
Javascript Object Notation
作用：
主要约束前后端交互数据的格式
JSON的格式
表示单个对象
使用{} 采用键值对的格式保存数据
键必须使用双引号引起来
相当于Python的字典
表示多个对象
使用[]表示一个数组
数组中允许包含多个字符串或对象
jQuery中的循环：
$arr.each(function(i, obj)){
$arr:表示jQuery中的数组
i:表示当前元素的下标
obj：表示的是当前元素
}；
$.each(arr,function(i, obj){
arr:表示jQuery中的数组
i:表示当前元素的下标
obj：表示的是当前元素
});
<!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>
<script>
$(function(){
/*为#btn绑定click事件*/
$("#btn").click(function(){
//1.创建xhr
var xhr = createXhr();
//2.创建请求
xhr.open('get','/json',true);
//3.设置回调函数
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var resText = xhr.responseText;
/*console.log(typeof(resText));
console.log(resText);*/
//将resText 转换为 JSON对象
var arr = JSON.parse(resText);
// 循环
$.each(arr,function(i,obj){
console.log(obj.name);
console.log(obj.age);
console.log(obj.gender);
});
}
}
//4.发送请求
xhr.send(null);
});
});
</script>
</head>
<body>
<button id="btn">JSON</button>
</body>
</html>
后台处理JSON
在后台查询出数据再转换为JSON的格式字符串 再响应
给前端 到前端后再将字符串转换为JS对象
1.后台获取数据
类型允许为 元祖，列表、字典
2.在后台将数据转换为符合JSON格式的字符串
3.在后台将JSON格式的字符串进行响应
4.在前端将JSON格式的字符串解析成JS对象
@app.route('/json_users')
def json_users():
user = Users.query.filter_by(id=1).all()
list = []
for u in user:
list.append(u.to_dict())
return json.dumps(list)
@app.route('/01-users')
def users_01():
return render_template('01-users.html')
在Python中的JSON处理
元祖、列表、字典、只用Python中的json类就可以
import json
jsonstr = json.dumps(数据结构)
return jsonstr
@app.route('/json')
def json_views():
list = ["Fan Bingbing","Li Chen","Cui Yongyuan"]
dic = {
'name':'Bingbing Fan',
'age' : 40,
'gender':'female',
}
uList = [
{
'name': 'Bingbing Fan',
'age': 40,
'gender': 'female',
},
{
'name' : "Jinbao Hong",
'age' : 70,
'gender' : 'male'
}
]
jsonStr = json.dumps(uList)
return jsonStr
在前端中处理JSON
由于在服务器响应回来的数据是string
有些时候必要将响应回来的数据转换为JS对象或数组
在js中
JSON对象 = JSON.parse(JSON字符串)
var arr = JSON.parse(resText);
JQuery AJAX
在jQuery中 提供了原生的AJAX的封装
$obj.load(url, [data], [callback])
作用：
异步加载数据到$obj元素中
参数：
URL：异步请求地址
data：传递给服务端的参数 可以传递字符串，JSON对象
callback: 异步请求完成后要执行的操作 （回调函数）
function(resText, statusText){
resText:响应数据
statusText：响应的状态文本
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btnLoad">使用load方法加载</button>
<div id="show"></div>
<script src="/static/js/jquery-1.11.3.js"></script>
<script>
$(function(){
$("#btnLoad").click(function(){
//var params = "name=sf.zh&age=85";
var params = {
"name":'yinsusu',
"age":25,
}
$("#show").load(
'/03-server',
params,
function(resText,statusText){
/*console.log("resText:"+resText);
console.log("statusText:"+statusText);*/
$(this).html("<h1>"+resText+"</h1>");
});
});
});
</script>
</body>
</html>@app.route('/03-load')
def load_views():
return render_template('03-load.html')
@app.route('/03-server',methods=['POST'])
def server_03():
name = request.form.get('name')
age = request.form.get('age')
return "姓名:%s,年龄:%s" % (name,age)
$.get(url, [data], [callback], [type])
url:异步请求地址
data：请求提交的数据 可以是字符串，json对象
callback：请求成功时的回调函数
function(resText){
resText：响应后来的文本
}
type：
响应回来的数据类型
HTML：响应回来的文本是HTML文本（默认）
text：响应回来的文本是普通文本
json：响应回来的文本是json对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btnGet">发送get请求</button>
<div id="show"></div>
<script src="/static/js/jquery-1.11.3.js"></script>
<script>
$(function(){
$("#btnGet").click(function(){
$.get('/04-server',function(resText){
/*console.log("type："+typeof(resText));
console.log(resText);*/
$.each(resText,function(i,obj){
console.log(obj.id + ":" + obj.cityname);
});
},'json');
});
});
</script>
</body>
</html>@app.route('/04-get')
def get_views():
return render_template('04-get.html')
@app.route('/04-server')
def server_04():
cities = City.query.all()
list = []
for city in cities:
list.append(city.to_dict())
return json.dumps(list)
