json学习大全

不想秃头爱敲码的小姐姐

于 2020-05-15 21:33:42 发布

阅读量385

点赞数 1

分类专栏：前端学习文章标签： json

本文链接：https://blog.csdn.net/weixin_42917994/article/details/106149233

版权

前端学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

1.json简介

1.1 定义

定义： json是轻量级的文本数据交换格式。javascript对象表示法。(javascript Object Notation)

1.2 用于做什么

作用：
1. json用于存储和交换文本信息的语法。类似XML。
2. json常用于服务端向网页传送数据。

1.3 特点

特点：
1. json是独立语言。使用javascript语法来描述数据对象，但是json仍然独立于语言和平台。 json解析器和json库支持不同的语言。
2. json比xml更小，更快，更易解析。

1.3 与xml比较

相同点：
1. json是纯文本
2. json具有自我描述性(人类可读)
3. json具有层级结构(值中存在值)
4. json可通过javascript解析
5. json数据可使用ajax进行传输
不同点：
1. json没有结束标签
2. json更短
3. json读写速度块
4. 能够使用内建的javascript eval()方法进行解析
5. 使用数组
6. 不使用保留字

2. json语法

2.1 语法规则

数据在名称/值对中；
数据由逗号分割；
花括号保存对象；
方括号保存数组；

json名称/值对

json数据的书写格式：名称/值对
        名称/值对：字段名称(在双引号中)，后面写一个冒号，然后是值。
        例如："firstname"："John"

json值：

		数字(整数，浮点数)
        字符串(在双引号中)
        逻辑值(true,false)
        数组(在方括号中)
        对象(在花括号中)
        null

json对象

对象可以包含多个名称/值对：
        例如：{
            "name":"maolili",
             "age":21
        }

json数组

 "arrs":[
            {"name":"maolili","age":21},
            {"name":"maolili","age":21},
          ]

2.2 json使用javascript语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <h3>通过 JSON 字符串来创建对象</h3>
    <p>json使用javascript语法，所以不需要额外的软件就能处理javascript中的json</p>
    <p>First Name: <span id="fname"></span></p>

    <script type="text/javascript">
        //相当于使用json语法创建了一个对象。
        var employees = [
            { "firstName":"Bill" , "lastName":"Gates" },
            { "firstName":"George" , "lastName":"Bush" },
            { "firstName":"Thomas" , "lastName": "Carter" }
        ];
        //employees[1].firstName="Jobs";
        document.getElementById("fname").innerHTML=employees[1].firstName+employees[1].lastName;
    </script>

</body>
</html>

3. json的使用

3.1 把json文本转换成javascript对象

json最常见的方法之一，是从web服务器上读取json数据(作为文件或作为httpRequest)，将json数据转换成javascript对象，然后在网页中使用该数据。
eval()： 由于json语法是javascript语法的子集，javascript函数eval()可用于将json文本转换成javascript对象。eval()函数使用的是javascript编译器，可解析json文本，然后生成javascript对象。必须把文本包围在括号中，这样避免语法错误。var obj = eval ("(" + txt + ")");
实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<h3>通过 JSON 字符串来创建对象</h3>
<p>
    因为json语法是javascript语法的子集，javascript函数eval()可用于将json文本转换成javascript对象
    eval()函数使用的是javascript编译器，可以解析json文本，然后生成javascript对象。
    但是必须把文本写在括号中，这样才可以避免错误。
</p>
    <p>
        First Name: <span id="fname"></span><br />
        Last Name: <span id="lname"></span><br />
    </p>
    <script type="text/javascript">
        //相当于定义了一个字符串，然后解析成json对象
        var txt = '{"employees":[' +
            '{"firstName":"Bill","lastName":"Gates" },' +
            '{"firstName":"George","lastName":"Bush" },' +
            '{"firstName":"Thomas","lastName":"Carter" }]}';

        var obj = eval ("(" + txt + ")");//使用javascript解析器
        //var obj=JSON.parse(txt);//使用json解析器
        document.getElementById("fname").innerHTML=obj.employees[1].firstName
        document.getElementById("lname").innerHTML=obj.employees[1].lastName
    </script>
</body>
</html>

3.2 json解析器

eval() 函数可编译并执行任何 JavaScript 代码。这隐藏了一个潜在的安全问题。
使用json解析器将json转换成javascript对象更安全。json解析器只能识别到json文本，而不会编译脚本。
在浏览器中，提供原生的json支持，而且json解析速度快。
实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>用 JSON 字符串创建对象</h1>

<p id="demo"></p>

<script>
    var txt = '{"name":"Bill Gates", "age":62, "city":"Seattle"}'
    var obj = JSON.parse(txt);
    document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
</script>

</body>
</html>

3.3 使用ajax获取json文件中数据

<!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="jquery-2.2.4.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: "1.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='p p1'>"+obj['name']+"</div>"+

                    //获得性别

                    "<div class='p p2'>"+obj['sex']+"</div>"+

                    //获得邮箱地址

                    "<div class='p p3'>"+obj['email']+"</div>"+

                    "</div>");

            });

        }

    </script>

</head>

<body>

<!-- 构建装一个容器 -->

<div id="box">

</div>

</body>

</html>

1.json

[

  {

    "name":"张国立",

    "sex":"男",

    "email":"zhangguoli@123.com",

    "url":"1.jpg"

  },

  {

    "name":"张铁林",

    "sex":"男",

    "email":"zhangtieli@123.com",

    "url":"2.jpg"

  },

  {

    "name":"邓婕",

    "sex":"女",

    "email":"zhenjie@123.com",

    "url":"3.jpg"

  },

  {

    "name":"张国立",

    "sex":"男",

    "email":"zhangguoli@123.com",

    "url":"4.jpg"

  },

  {

    "name":"张铁林",

    "sex":"男",

    "email":"zhangtieli@123.com",

    "url":"5.jpg"

  },

  {

    "name":"邓婕",

    "sex":"女",

    "email":"zhenjie@123.com",

    "url":"6.jpg"

  }

]

效果

不想秃头爱敲码的小姐姐

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
json学习大全

文章目录1.json简介1.1 定义1.2 用于做什么1.3 特点1.3 与xml比较2. json语法2.1 语法规则2.2 json使用javascript语法3. json的使用3.1 把json文本转换成javascript对象3.2 json解析器3.3 使用ajax获取json文件中数据1.json简介1.1 定义定义： json是轻量级的文本数据交换格式。javascript对象表示法。(javascript Object Notation)1.2 用于做什么作用：1.
复制链接

扫一扫