• 【速成之路】网页编程必会的Ajax——JSON

    🎉个人主页：这个昵称我想了20分钟
    ✨往期专栏: 【速成之路】jQuery
          【速成之路】SQLserver

    🔓本期专栏：【速成之路】Ajax

    JSON


    在这里插入图片描述

    JSON概述

      JSON( JavaScriptObject Notation, JavaScript 对象表示方法)是一种轻量级的数据交换格式，是基于ECMA Script(欧洲计算机协会制定的JS规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得JSON成为理想的数据交换语言，易于人们阅读和编写，同时易于机器解析和生成，可以有效地提升网络传输效率。
      JSON就是一串字符串，只不过元素会使用特定的符号标注。主要符号表示的含义说明如下：

    • 双括号{}：表示对象。
    • 中括号［］：表示数组。
    • 双引号" "：其中的值是属性或值。
    • 冒号：：表示后者是前者的值（这个值可以是字符串、数字，也可以是另一个数组或对象）。

      JSON的语法规则中把数据放在“键/值”对中，并且多个数据之间用逗号隔开。其中，对象由花括号括起来并且用逗号分隔的成员构成，成员是字符串键和上文所述的值由冒号分隔的键值对组成。例如定义一个学生对象student：

    {"name":"kun kun", "age":18, "address":{"country":"China", "zip-code":"430022"}}

    • 1

      数组由中括号括起来的一组值构成，例如：

    [3,1,4,1,5,9,2,6]

    • 1

      JSON是 JavaScript 对象的字符串表示法，使用文本表示一个 JavaScript 对象的信息，例如：

    var obj={a:'Hello',b:'World'};//这是一个对象，注意键名也可以使用引号包裹
var json='{"a":"Hello","b":"World"}';//这是JSON字符串，本质是一个字符串

    • 1
    • 2

    JSON的使用

      简单地说，JSON可以将 JavaScript 对象中表示的一组数据转换为字符串，然后可以在网络或者程序之间轻松地传递这个字符串，并在需要的时候再将其还原为各编程语言所支持的数据格式。例如在Ajax中使用时，如果需要用到数组传值，就需要用JSON将数组转化为字符串。JSON数据获取的语法格式如下所示：

    JSON对象.键名
JSON对象["键名"]
数组对象［索引］

    • 1
    • 2
    • 3

      JSON使用 JavaScript 语法，所以在 JavaScript 中可以直接处理JSON数据。例如可以直接访问本节中定义的student对象：

    student.name//返回字符串"kun kun"
student.address.country//返回字符串"China"

    • 1
    • 2

      也可以直接修改数据：

    student.name="ikun"

    • 1

      另外，要实现从JSON字符串转换为 JavaScript 对象，可以使用JSON.parse()方法，示例代码如下所示：

    var obj=JSON.parse('{"a":"Hello","b":"World"}');
//结果是{a:'Hello',b:'World'}

    • 1
    • 2

      要实现从 JavaScript 对象转换为JSON字符串，使用JSON. stringify()方法：

    var json=JSON.stringify({a:'Hello',b:'World'});
//结果是 {a:'Hello',b:'World'}

    • 1
    • 2

      下例对JSON对象和JSON数组进行遍历，其在浏览器中的显示结果如图所示。

    <!DOCTYPE html>
<html>
  <head>
   <meta charset="utf-8">
   <title>JSON</title>
   <script>
     //定义JSON对象
     var myJson={'name':'李华','age':18};
     //遍历JSON对象
     for(var key in myJson){
        document.write(key+':'+myJson[key]+"<br>");
    }
     //定义JSON数组，其成员是JSON对象
    var wqJson=[{'name':'张三','age':19},
         {'name':'李四','age':20},
         {'name':'王五','age':21},
    ]
    //遍历JSON数组
    for(var i=0;i<wqJson.length;i++){
       for(var j in wqJson[i]){
       document.write(j+":"+wqJson[i][j]+"<br>")
       }
    }
   </script>
  </head>
<body>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    在这里插入图片描述

    图 JSON数据遍历

    在这里插入图片描述

  • 相关阅读:
    AD9371 官方例程 NO-OS 主函数 headless 梳理（二）
    代码随想录第39天 | ● 198.打家劫舍 ● 213.打家劫舍II ● 337.打家劫舍III
    怎么保护苹果手机移动应用程序ipa中文件安全？
    策略下发与安全处置
    汽车变排量空调压缩机电磁阀故障诊断
    C++虚函数的vptr与vtable
    教育ADOBE账号登录一直失败解决办法
    java开发面试评语
    python正则化表达式
    服务器之间配置用户SSH免密登录（Linux Centos 7）
  • 原文地址：https://blog.csdn.net/m0_61684063/article/details/124713152