什么是JSON,有什么用?
JSON的语法格式:
创建JSON数组和遍历
复杂一些的JSON对象
eval函数
面试题:
JSON是一种行业内的数据交换格式标准,JSON在JS中以JS对象的形式存在
JavaScript Object Notation(JavaScript对象标记),简称JSON。(数据交换格式)
JSON主要的作用是:一种标准的数据交换格式。(目前非常流行。90%以上的系统,系统A与系统B交换数据的话,都是采用JSON。)
2、JSON是一种标准的轻量级的数据交施格式。特点是:体积小,易解析。
3、在实际的开发中有两种数据文换格式,使用最多,其一是JSON,另一个是XML。XML体积较大,解析麻频,但是有其优点是:语法严谨。(通常银行相关的系统之间进行数据交换的话会使用XML。)
var jsonObj={
"属性名" :属性值,
"属性名" :属性值,
"属性名" :属性值,
...........
}
//创建JSON对象(JSON也可以称为无类型对象。轻量级,轻巧。体积小。易解析。)
<script text/javasctipt>
var studentObj={
"sno":"110","sname":"张三","sex":"男"
};
//访间JSON对象的属性
alert(studentObj.sno+","+studentObj.sname +","+ studentObj.sex)
</script>
<script type="text/javascript">
// JSON数组
var students =[
{"sno":"110","sname":"张三","sex":"男"},
{"sno":"120","sname":"李四","sex":"男"},
{"sno":"130", "sname":"王五","sex":"男"}
];
// 遍历
for(var i = 0; i<students.length; i++){
var stuObj =students[i];
alert(stuObj.sno+","+stuObj.sname+","+ stuObj.sex);
}
</script>
json对象里面可以包含json对象,和数组之类的数组用下标访问即可
访问对象用"."即可访问,如访问aihao中的"drink",user.address.aihao[1]
<script type="text/javascript">
var user ={
"usercode":110,"username":"王五",
"sex":["男","女"],
"address":{
"city":"北京",
"street":"大兴区",
"zipcode":"12212121",
"aihao" : ["smoke","drink","tt"]
}
}
// 访问人名以及居住的城市
alert(user.username+user.sex[0]+",居住在"+user.address.city+",喜欢"+user.address.aihao[0]);
</script>
eval函数的作用是:
将字符串当做一段JS代码解释并执行。
如:
window.eval("var i=100:"); alert("i="+i);//i=100
Java连接数据库,查询数据之后,将数据在java程序中拼接成JSON格式的“字符串”将JSON格式的字符串响应到浏览器
也就是说Java响应到浏览器上的仅仅是一个"JSON格式的字符串”还不是一个JSON对象。
可以使用eval图数,将JSON格式的字符串转换成JSON对象。
<script type="text/javascript">
//这是java程序给发过来的ison格式的"字符串”//将以上的json格式的字符串转换成json对象
var fromJava="{\"name\":\"zhangsan!\",\"password\":\"123456\"}";
window.eval("var jsonObj="+fromJava);//相当于用jsonObj创建了对象
// 访问json对象
alert(jsonObj.name +","+jsonObj.password);// 在前端取数据。
</script>
结果:
在JS中:[ ]和 { }有什么区别?
[ ]是数组
{ }是JSON对象
java中的数组:int arr={1,2,3,4};
js中的数组:var arr=[1,2,3,4];
JSON中的数组: var jsonObj={"name ": "张三","age":"12"};
table的用法
<script type="text/javascript">
var data={
"total" :4,
"emps" :[
{"empno" :110,"ename":"SMiTH","sal": 100},
{"empno" :120,"ename":"SMiTH","sal": 100},
{"empno" :130,"ename":"SMiTH","sal": 100},
{"empno" :140,"ename":"SMiTH","sal": 100}
]
};
window.onload = function(){
var displayBtnElt =document.getElementById("displayBtn");
displayBtnElt.onclick =function(){
var emps = data.emps;
var html ="";
for(var i = 0; i<emps.length; i++){
var emp = emps[i];
html += "<tr>";
html +="<td>"+emp.empno+"</td>";
html +="<td>"+emp.ename+"</td>";
html +="<td>"+emp.sal+"</td>";
html += "</tr>";
}
document.getElementById("emptbody").innerHTML=html;
document.getElementById("count").innerHTML=data.total;
}
}
</script>
<input type="button" value="显示员工信息列表" id="displayBtn"/>
<h2>员工信息列表</h2>
<hr>
<table border="1px" width="50%">
<tr>
<th>员工编号</th>
<th>员工名字</th>
<th>员工薪资</th>
</tr>
<tbody id="emptboy">
</tbody>
</table>
总共<span id="count"></span>
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/weixin_60719453/article/details/122552499
内容来源于网络,如有侵权,请联系作者删除!