JSON基础与使用以及实例演示

叁歲伎倆 2022-05-11 02:33 176阅读 0赞

# JSON基础与实例 #

预计阅读时间：10分钟

下面我整理了一些基础性（JSON深入浅出）的问题，再一一解答这些问题。其次，在一些比较难以理解的地方，也有举例说明，希望能够帮到您！废话不多说，请看目录：

**目录**

JSON基础与实例

一、JSON是什么？

二、JSON用来做什么？

三、为什么要用JSON？

四、如何使用JSON？

（一） JSON基于两种结构

（二） JSON的形式

1.对象（object）

2.数组（array）

3.值（value）

4.字符串（string）

5.数值（number）

关于转换为 JS对象的问题

附加内容：

AJAX获取JSON文件中的数据

Item.json

index.html

--------------------

（概念整理自JSON官网：[http://www.json.org.cn/][http_www.json.org.cn]）

## 一、JSON是什么？ ##

JSON 是一种轻量级的数据交换格式。

## 二、JSON用来做什么？ ##

JSON 是用于存储和传输数据的格式。

JSON 通常用于服务端向网页传递数据 。

## 三、为什么要用JSON？ ##

*  容易阅读和编写。
 *  方便机器解析和生成。
 *  JSON采用独立于程序语言的文本格式，但是也使用了常用编程语言的习惯。这些特性使JSON成为理想的数据交换语言。

## 四、如何使用JSON？ ##

### （一） JSON基于两种结构 ###

1.“名称/值”对的集合（A collection of name/value pairs）

不同的编程语言中，它被理解为对象（object），纪录（record），结构（struct），字典（dictionary），哈希表（hash table），有键列表（keyed list），或者关联数组 （associative array）。

2.值的有序列表（An ordered list of values）。

在大部分语言中，它被实现为数组（array），矢量（vector），列表（list），序列（sequence）。

这些都是常见的数据结构。目前，大部分编程语言都支持它们。这使得在各种编程语言之间交换同样格式的数据成为可能。

### （二） JSON的形式 ###

### 1.对象（object） ###

是一个无序的“‘名称/值’对”集合。一个对象以“\{”（左括号）开始，“\}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。

![70][]

**实例：**

<!DOCTYPE html>
    
    <html>
    
    <head>
    
    <meta charset="utf-8">
    
    <title>DJun(blog.csdn.net/qq_41647999)</title>
    
    </head>
    
    <body>
    
    <p>
    
    商品名称: <span id="goodsname"></span><br />
    
    商品地址: <span id="goodsurl"></span><br />
    
    公司 slogan: <span id="goodsslogan"></span>
    
    </p>
    
    <script>
    
    var JSONObject= {
    
           "name":"大白菜",
    
           "url":"https://mrdjun.github.io/",
    
           "slogan":"热爱知识，传递技术！"
    
    };
    
    document.getElementById("goodsname").innerHTML=JSONObject.name
    
    // innerHTML在JS是双向功能：获取对象内容 或 向对象插入内容；
    
    //在这是向id为goodsname的对象插入JSONObject.name内容
    
    document.getElementById("goodsurl").innerHTML=JSONObject.url
    
    document.getElementById("goodsslogan").innerHTML=JSONObject.slogan
    
    </script>
    
    </body>
    
    </html>

### 2.数组（array） ###

是值（value）的有序集合。一个数组以“\[”（左中括号）开始，“\]”（右中括号）结束。值之间使用“,”（逗号）分隔。

![70 1][]

**实例：**

var JSONObject ={
    
    "sites": [
    
    { "name":"菜鸟教程" , "url":"www.runoob.com" }, 
    
    { "name":"google" , "url":"www.google.com" }, 
    
    { "name":"微博" , "url":"www.weibo.com" }
    
    ]
    
    }

网页实现调用的方式和上述实例相同。

### 3.值（value） ###

可以是双引号括起来的字符串（string）、数值(number)、`true`、`false`、 `null`、对象（object）或者数组（array）。这些结构可以嵌套。

### 4.字符串（string） ###

是由双引号包围的任意数量Unicode字符的集合，使用反斜线转义。一个字符（character）即一个单独的字符串（character string）。

JSON的字符串（string）与C或者Java的字符串非常相似。

下面介绍两个函数：

<table style="margin-left:32.95pt;"> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:196.6pt;"> <p style="margin-left:0cm;"><a href="http://www.runoob.com/js/javascript-json-parse.html" rel="nofollow">JSON.parse()</a></p> </td> 
   <td style="vertical-align:top;width:196.55pt;"> <p style="margin-left:0cm;">用于将一个 JSON 字符串转换为 JavaScript 对象。</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:196.6pt;"> <p style="margin-left:0cm;"><a href="http://www.runoob.com/js/javascript-json-stringify.html" rel="nofollow">JSON.stringify()</a></p> </td> 
   <td style="vertical-align:top;width:196.55pt;"> <p style="margin-left:0cm;">用于将 JavaScript 值转换为 JSON 字符串。</p> </td> 
  </tr> 
 </tbody> 
</table>

### 5.数值（number） ###

与C或者Java的数值非常相似。只是JSON的数值没有使用八进制与十六进制格式。同时，可以在任意标记之间添加空白。

### 关于转换为 JS对象的问题 ###

使用内建的 JavaScript eval() 用方法进行解析JSON数据来生成原生的Javascript对象`。`

到这里，JSON的基本知识也就到这里结束了。如果您已经学习过AJAX的话，可以在看一下以下内容哦~

# 附加内容： #

## AJAX获取JSON文件中的数据 ##

读取JSON数据，需要模拟服务器的环境（比如运行在tomcat、apache等容器），也可以使用编辑器运行在某端口，都能实现下面这个效果。请注意：双击运行（这是查看文件的方式）是无法读取json文件的，

### Item.json ###

[
    
      {
    
        "name":"张国立",
    
        "sex":"男",
    
        "email":"zhangguoli@123.com",
    
        "url":"./img/1.jpg"
    
      },
    
      {
    
        "name":"张铁林",
    
        "sex":"男",
    
        "email":"zhangtieli@123.com",
    
        "url":"./img/2.jpg"
    
      },
    
      {
    
        "name":"邓婕",
    
        "sex":"女",
    
        "email":"zhenjie@123.com",
    
        "url":"./img/3.jpg"
    
      },
    
      {
    
        "name":"张国立",
    
        "sex":"男",
    
        "email":"zhangguoli@123.com",
    
        "url":"./img/4.jpg"
    
      },
    
      {
    
        "name":"张铁林",
    
        "sex":"男",
    
        "email":"zhangtieli@123.com",
    
        "url":"./img/5.jpg"
    
      },
    
      {
    
        "name":"邓婕",
    
        "sex":"女",
    
        "email":"zhenjie@123.com",
    
        "url":"./img/6.jpg"
    
      }
    
    ]

### index.html ###

<!DOCTYPE html>
    
    <html>
    
    <head>
    
        <meta charset="UTF-8">
    
        <title>Insert title here</title>
    
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    
        <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    
        <style type="text/css">
    
    
            .p1{
    
                font-size: 14px;
    
                color: #000;
    
            }
    
            .p2{
    
                font-size: 12px;
    
                color: #b0b0b0;
    
            }
    
            .p3{
    
                font-size: 14px;
    
                color: #ff5f19;
    
            }
    
            .product{
    
                width:100%;
    
                position: relative;
    
                margin: 20px 0 5px 0;
    
                height: 100px;
    
                background: #fafafa;
    
            }
    
    
            .img{
    
                width: 100px;
    
                height: 100px;
    
                float: left;
    
                margin-right: 20px;
    
            }
    
            .p{
    
                display:inline-block;
    
                float:left;
    
                width:50%;
    
                margin-top:6px;
    
                font-family: Microsoft YaHei;
    
            }
    
            .p1{
    
                margin-top:16px;
    
            }
    
    
    
    
        </style>
    
        <script>
    
            //页面加载   获取全部信息
    
            $(function(){
    
                $.ajax({
    
                    type: "POST",//请求方式
    
                    url: "item.json",//地址，就是json文件的请求路径
    
                    dataType: "json",//数据类型可以为 text xml json  script  jsonp
    
    　　　　　　　　　 success: function(result){//返回的参数就是 action里面所有的有get和set方法的参数
    
                        addBox(result);
    
                    }
    
                });
    
                /*$.get("item.json",function(result){
    
                    //result数据添加到box容器中;
    
                    addBox(result);
    
                });*/
    
            });
    
            function addBox(result){
    
                //result是一个集合,所以需要先遍历
    
                $.each(result,function(index,obj){
    
                    $("#box").append("<div class='product'>"+//获得图片地址
    
                        "<div><img class='img' src="+obj['url']+"/></div>"+
    
                        //获得名字
    
                        "<div class='p1 p'>"+obj['name']+"</div>"+
    
                        //获得性别
    
                        "<div class='p2 p'>"+obj['sex']+"</div>"+
    
                        //获得邮箱地址
    
                        "<div class='p3 p'>"+obj['email']+"</div>"+
    
                        "</div>");
    
                });
    
            }
    
        </script>
    
    </head>
    
    <body>
    
    
    
    <div id="box">
    
    </div>
    
    </body>
    
    </html>

**效果图：**

![70 2][]

[http_www.json.org.cn]: http://www.json.org.cn/
[70]: /images/20220511/82d58f90fcb34cfaac201990092a1658.png
[70 1]: /images/20220511/fe3c61fa3d9047068b0786c4d71dea1f.png
[70 2]: /images/20220511/708a16d7dd8a4a18af31c59b13427931.png