介绍JSON
JSON:JavaScript Object Notation
JS 对象 表现方式
以JS对象的格式来约束前后端交互的字符串数据
JSO - JS对象
使用 js 对象表示一个人的信息,包含如下属性:
姓名:wangwc
年龄:30
身高:180
体重:180
表示方法如下
var obj ={
name:"wangwc",
age:30,
height:180,
weight:180
}
console.log("姓名:"+obj.name);
JSON规范
- 使用json表示单个对象
1. 使用 {} 表示一个对象
2. 在 { } 中使用key :value 来表示属性(数据)
3. 必须使用双引号" “引起来
4. value如果是字符串的话,也必须使用” "双引号引起.
5. 多对 key:value 之间使用 , 做分离
// 示例 对象表示方法
var obj = {" name " : " wangwc " , "age":30 };
- 使用json表示多个对象
- 使用 [] 来表示 一组对象
示例: 使用JSON表示两个人的信息
- 使用 [] 来表示 一组对象
var users = '[ {"name":"wangwc","age":30},{"name":"weimz","age":40} ]';
JSON 请求流程
- 前端发送请求
- 接收请求
- 执行操作/查询数据
- 将响应数据转换成JSON格式的字符串
- 响应
- 接收响应数据(JSON字符串)
- 将JSON串转换为js对象
- …
前端中处理JSON
将得到的JSON串转换成js对象/数组
var js对象 = JSON.parse(json串);
JSON串转换成js对象/数组示例
html页面中创建两个按钮用于触发转换
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
/*导入JQ*/
<script src="../../../static/js/jquery-1.11.3.js"></script>
/*导入JS文件在JS中处理JSON 导入以下JS文件*/
<script src="../../../static/js/json_.js"></script>
</head>
<body>
<button id="btnJSON">JSON串转换为JS对象</button>
<button id="btnJSONArr">JSON串转换为JS数组</button>
</body>
</html>
JS文件
$(function () {
$("#btnJSON").click(function () {
//1. 模拟一个JSON字符串
var flight = '{"flightNO":"NH980",' +
'"from":"PEK",' +
'"to":"KIX",' +
'"time":"14:20"}';
//2.通过JSON.parse()将JSON串转换成JS对象
var obj = JSON.parse(flight);
// console.log(obj);
//3.解析对象
console.log("航班号:" + obj.flightNO);
console.log("出发:" + obj.from);
console.log("到达:" + obj.to);
console.log("时间:" + obj.time);
});
// *************************************************
// JSON 转换数组示例
$("#btnJSONArr").click(function () {
var str = '[{"flightNO":"NH666",' +
'"from":"PEK",' +
'"to":"KIX",' +
'"time":"11:11"},{"flightNO":"NH777",' +
'"from":"PEK",' +
'"to":"KIX",' +
'"time":"22:22"}]';
var arr = JSON.parse(str);
$(arr).each(function (i, obj) {
console.log("下标为:" + i + "的元素");
console.log("航班:" + obj.flightNO);
console.log("出发:" + obj.from);
console.log("到达:" + obj.to);
console.log("时间:" + obj.time);
});
})
});
效果展示
前端中将JS对象转换成JSON串
服务器端将JSON串转换为字典或者列表
- 方法: json.loads(jsonstr)
- 示例
def serverjason_views(request):
jsonstr = '{"uname": "wangwc", "uage": 30, "ugender": "unknown"}' # json串
# 通过json.loads() 将jsonstr转换为Python字典
dic = json.loads(jsonstr) # 转换
s = "姓名:%s,年龄:%s,性别:%s" % (dic["uname"], dic["uage"], dic["ugender"])
return HttpResponse(s) # 响应到客户端
# 浏览器输出样式:姓名:wangwc,年龄:30,性别:unknown
json串方法简易注册
- 建议实现效果 这里用get请求
- 参数 要求封装成JSON串传递到服务器端,服务器解析然后做注册
pass
// 正在更新中