JSON数据是目前前端比较流行的。在此之前用的是XML
JSON通常用于在客户端和服务器之间传递数据，是一种轻量级的文本数据交换格式，基于Javascript，采用完全独立于语言的文本格式。
1、json数据格式
[]：中括号保存数组
{}：大括号保存对象
[{}]：数组内是对象---保存的是对象数组
对象以键值对形式存在，key:value
key是字符串，必须加双引号，value可以是js中的任意数据类型(数字，字符串，布尔值类型等)
json的格式数据主要有对象和数组两种形式。
json对象语法
var json对象={key:vavlue,key:value….}
比如：var user={“name”:”zhangsan”,”age”:19}
json数组语法：
var json数组=[value,value,….]
比如：var country=[“广东”,”广西”,”“湖南”]
还可以是对象数组：var json数组=[{ key:vavlue},{key:value….}]
比如：var users=[{“name”:”zhangsan”,”age”:19},{“name”:”lisi”,”age”:29}]
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/jquery-1.12.4.js"></script> </head> <body> <button>json对象</button> <button>json数组</button> <button>json对象数组</button> <div></div> </body> <script> //定义一个json对象 var student={ "stuName":"小张", "age":20, "class":"20计应4" }
//获取json对象数据：对象.属性 $("button:eq(0)").click(function(){ // console.log(student.stuName) $("div").html("姓名："+student.stuName+"<br>年龄："+student.age+"<br>班级："+student.class+"<br>") })
//定义一个json数组 var city=["东莞","中山","广州","深圳"]
//获取json数组元素：用循环遍历 $("button:eq(1)").click(function(){ for(var i = 0; i < city.length; i++){ // console.log(city[i]) $("div").append(city[i]+"<br>"); } })
//定义一个json对象数组 var users=[{ "name":"Lucy", "password":1234 },{ "name":"Tom", "password":123456 },{ "name":"Candy", "password":456 }]
//获取对象数组：用循环遍历 $("button:eq(2)").click(function(){ for(var i = 0; i < users.length; i++){ // console.log(users[i]) // console.log(users[i].name) $("div").append(users[i].name+" "+users[i].password+"<br>") } })
</script> </html> |
2、json字符串转换成json对象
$.parseJSON(jsonStr)
JSON.parse(jsonStr)
3、json对象转换成json字符串
var str=JSON.stringify(jsonObj)
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/jquery-1.12.4.js"></script> </head> <body> </body> <script> //定义一个json对象 var jsonObj={"name":"Tom","password":123456} //定义一个json字符串 var jsonStr='{"name":"Tom","password":123456}' //控制台打印输出json对象和json字符串，观察它们的区别 // console.log(jsonObj); // console.log(jsonStr)
//把json字符串转换成json对象: //1、jQuery.parseJSON(str) 相当于 $.parseJSON(str) var obj1=$.parseJSON(jsonStr); // console.log(obj1)
//2、JSON.parse(str) var obj2=JSON.parse(jsonStr) // console.log(obj2)
//把json对象转换成json字符串:JSON.stringify(obj) var str=JSON.stringify(jsonObj); console.log(str); </script> </html> |
4、json数据应用：简单的调色板
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 200px; height: 200px; background-color: rgb(0, 0, 0); }
</style> <script src="../js/jquery-1.12.4.js"></script> </head> <body>
<div></div> R: 0 <input type="range" min="0" max="255" value="0"/><span>255</span><br> G: 0 <input type="range" min="0" max="255" value="0"/><span>255</span><br> B: 0 <input type="range" min="0" max="255" value="0"/><span>255</span><br>
</body> <script> //定义一个json对象存储r,g,b的值 var color={ "R":0, "G":0, "B":0 } $("input:eq(0)").on("input",function(){ var r=$(this).val(); //获取当前的input的值 $("span:eq(0)").text(r);//把获取到的值设置到span标签内容 color.R=r; // console.log(color.R+" "+color.G+" "+color.B) changeColor(color) })
$("input:eq(1)").on("input",function(){ var g=$(this).val(); //获取当前的input的值 $("span:eq(1)").text(g);//把获取到的值设置到span标签内容 color.G=g; changeColor(color) })
$("input:eq(2)").on("input",function(){ var b=$(this).val(); //获取当前的input的值 $("span:eq(2)").text(b);//把获取到的值设置到span标签内容 color.B=b; changeColor(color) })
//因为设置div的颜色代码都一样，可以把代码单独拿出来封装成一个独立的函数，然后去调用即可 function changeColor(color){ $("div").css("background-color","rgb("+color.R+","+color.G+","+color.B+")") }
</script> </html> |
