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)