JSON

        1、什么是JSON，有什么用？
                   JavaScript Object Notation（JavaScript对象标记），简称JSON。(数据交换格式)
                   JSON主要的作用是：一种标准的数据交换格式。（目前非常流行，90%以上的系统，系统A与系统B交换数据的话，都是采用JSON。）
               2、JSON是一种标准的轻量级的数据交换格式。特点是：
                   体积小，易解析。
               3、在实际的开发中有两种数据交换格式，使用最多，其一是JSON，另一个是XML。
                   XML体积较大，解析麻烦，但是有其优点是：语法严谨。（通常银行相关的系统之间进行数据交换的话会使用XML。）
               4、JSON的语法格式：
                   var jsonObj = {
                       "属性名" : 属性值,
                       "属性名" : 属性值,
                       "属性名" : 属性值,
                       "属性名" : 属性值,
                       ....
                   };

<body><script type="text/javascript">// 创建JSON对象(JSON也可以称为无类型对象。轻量级，轻巧。体积小。易解析。)var studentObj = {"sno":"110","sname":"张三","sex":"男"};// 访问JSON对象的属性alert(studentObj.sno + "," + studentObj.sname + "," + studentObj.sex)// 之前没有使用JSON的时候,定义类,创建对象,访问对象的属性.Student = function(sno,sname,sex){this.sno = sno;this.sname = sname;this.sex = sex;}var stu = new Student("111","李四","男");alert(stu.sno + "," + stu.sname + "," + stu.sex);// JSON数组var students = [{"sno":"120","sname":"zhangshang","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>
</body>

复杂一些的JSON对象

<body><script type="text/javascript">var user = {"usercode" : 110,"username" : "张三","sex" : true,"address" : {"city" : "北京","street" : "大兴区","zipcode" : "12212121",},"aihao" : ["smoke","drink","tt"]};// 访问人名以及居住的城市alert(user.username + "居住在" + user.address.city);</script>
</body>

请自行设计JSON格式的数据，这个JSON格式的数据可以描述
整个班级中每一个学生的信息，以及总人数信息。

<body><script type="text/javascript">var jsonData = {//这个班3个人，信息如下"total":3,"students":[{"name":"zhangsan","birth":"1980-10-20"},{"name":"lisi","birth":"1981-10-20"},{"name":"wangwu","birth":"1982-10-20"}]};</script>
</body>

JSON是一种行业内的数据交换格式标准。
JSON在JS中以JS对象的形式存在。

<body><script type="text/javascript">/*eval函数的作用是：将字符串当做一段JS代码解释并执行。*/window.eval("var i = 100")alert("i = "+ i)</script>
</body>

 java连接数据库,查询数据之后,将数据在java程序中拼接成JSON格式的“字符串”,将json格式的字符串响应到浏览器也就是说java响应到浏览器上的仅仅是一个"JSON格式的字符串",还不是一个json对象.可以使用eval函数,将json格式的字符串转换成json对象.

那儿是字符串拼接

<body><script type="text/javascript">//这是java程序给发过来的json格式的"字符串"var fromJava = "{\"name\":\"zhangsan\",\"password\":\"123\"}"// 将以上的json格式的字符串转换成json对象window.eval("var jsonObj = " + fromJava)//访问json对象, 在前端取数据.alert(jsonObj.name + "," + jsonObj.password)</script>
</body>

这样也行

面试题：
   在JS当中：[]和{}有什么区别？[] 是数组。{} 是JSON。java中的数组：int[] arr = {1,2,3,4,5};JS中的数组：var arr = [1,2,null,"zhangshan",NaN];JSON：var jsonObj = {"email" : "zhangsan@123.com","age":25};

<body><script type="text/javascript">var json = {"username":"zhanshan"}// JS中访问json对象的属性alert(json.username)//或者alert(json["username"])</script>
</body>

设置table的tbody

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">span{color: red;font-size: medium;}</style>
</head>
<body><script type="text/javascript">// 有这些json数据var data = {"total" : 4,"emps" : [{"empno":7369,"ename":"SMITH","sal":800.0},{"empno":7361,"ename":"SMITH2","sal":1800.0},{"empno":7360,"ename":"SMITH3","sal":2800.0},{"empno":7362,"ename":"SMITH4","sal":3800.0}]}// 希望把数据展示到table当中window.onload = function () {document.getElementById('displayBtn').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 = htmldocument.getElementById('count').innerText = 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，它里面可以包含很多tr--><tbody id="emptbody"></tbody></table>总共<span id="count">0</span>条数</body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>省市级联，目前就是讲思路</title></head><script>//真正开发不会这样准备数据，现在是讲思路var dates={'-1':[new Option("====请选择====","-1")],'hn':[new Option("长沙","cs"),new Option("岳阳","yy"),new Option("邵阳","sy")],'hb':[new Option("黄冈","hg"),new Option("武汉","wh")],'gd':[new Option("深圳","sz"),new Option("广州","gz"),new Option("东莞","dg")]};function checkprovince(){//1.获取省var  province =document.getElementById("province");//2.获取选择的 option  value 值var value = province.value;//3.通过value 去得到值var  citys =dates[value];//4.获取cityvar city=document.getElementById("city");//如果有问题，必需加这一句city.options.length=0;//5.循环citysfor(var i in citys){//console.log(citys[i]);city.options[i]=citys[i];}}</script><body>省：<select id="province" onchange="checkprovince()"><option value="-1">====请选择====</option><option value="hn">湖南</option><option value="hb">湖北</option><option value="gd">广东</option></select>市 ：<select id="city"><option value="-1">====请选择====</option></select></body>
</html>

JavaScript零基础入门--笔记动力节点最新老杜(九-完结）全套笔记精髓相关推荐

（超详细笔记整理）动力节点_老杜 | JavaSE零基础：P329（方法） - P479
JAVA基础学习第二篇文章的连接: (超详细笔记整理)动力节点_老杜 | JavaSE进阶 [P486之后]. 文章目录 JAVA基础学习方法 Java的主要内存空间栈数据结构 **栈数据结构: ...
JavaScript零基础入门 13：DOM规范中的MutationObserver接口
目录一.MutationObserver接口二.MutationObserver基本用法 1.observe()方法 2.回调与MutationRecord 3.disconnect()方法 4. ...
JavaScript零基础入门 7：JavaScript基础函数
目录一.时间函数Date 1.Date 2.创建一个指定的时间对象 3.getDate() 4.getDay() 5.getMonth() 6.getFullYear() 7.getTime() 8 ...
mysql基础入门 day2 动力节点[老杜]课堂笔记
day_2 本文原作者为动力节点教学总监杜老师老杜在其课老杜带你学_mysql 入门基础(mysql 基础视频+数据库实战)所写讲课笔记该文档和其涉及资料见文档末链接本人将其讲课笔记 txt 下载 ...
Python后端转JAVA最快多久_【动力节点】老杜支招：Java小白学习入门攻略，涵盖学习路线...
动力节点在B站的直播相当好,相当受欢迎,教学总监亲自解惑.零基础学Java的同学确实把思路打开不少. 回顾:11月14日晚8:00,杜老师在动力节点B站大咖直播间,首次开播与粉丝面基,本场直播不吹,不 ...
javascript零基础入门(小白)
1.js 历史 JavaScript 作为 Netscape Navigator 浏览器的一部分首次出现在 1996 年.它最初的设计目标是改善网页的用户体验. 作者:Brendan Eich 期初 ...
Python零基础入门（二）——Python中常见的数据结构[学习笔记]
目录 1.Number(数字) 2.String(字符串) 3.List(列表) 4.Tuple(元组) 5.Set(集合) 6.Dictionary(字典) 1.Number(数字) Python ...
JavaScript零基础入门 3：javascript运算符有哪些
JavaScript零基础入门 5：JavaScript函数详解

JavaScript零基础入门--笔记动力节点最新老杜(九-完结）全套笔记精髓

JSON

JavaScript零基础入门--笔记动力节点最新老杜(九-完结）全套笔记精髓相关推荐

最新文章

热门文章