JSON的基本概念和用法

最新推荐文章于 2024-07-14 14:35:12 发布
最新推荐文章于 2024-07-14 14:35:12 发布
阅读量2.7k 收藏 1
点赞数
分类专栏： [---json+xml---] 文章标签： json javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dzy21/article/details/52075622
版权

JSON基本使用

<!DOCTYPE html>

<html>

  <head>

    <title>TestJson.html</title>

  </head>

  <body>

  <h3>获取JSON创建的对象</h3>

    <p>

       NAME:<span id="name"></span><br/>

       ADDRESS:<span id="address"></span><br/>

       AGE:<span id="age"></span><br/>

       PHONE:<span id="phone"></span><br/>

    </p>

    <h3>获取JSON创建的数组</h3>

    <p>

       <span id="jsonarray"></span>

    </p>

    <script type="text/javascript">

    //声明JSON对象

  var JSONobj={

      "name":"China-Anhui",

      "address":"白天鹅国际商务中心",

      "age":"22",

      "phone":"15966667777"

  };

  //声明JSON数组

  var JSONarray={

      "eat":[

          {"morning":"baozi1","lunch":"fish1","night":"noddle1"},

          {"morning":"baozi2","lunch":"fish2","night":"noddle2"}

      ],

      "交通工具":[

          {"car":"宝马","walk":"步行","other":"电动车"}

      ]

  };

  //向页面输出json对象信息

  document.getElementById("name").innerHTML=JSONobj.name;

  document.getElementById("address").innerHTML=JSONobj.address;

  document.getElementById("age").innerHTML=JSONobj.age;

  document.getElementById("phone").innerHTML=JSONobj.phone;

  //向页面输出JSON数组信息

  document.getElementById("jsonarray").innerHTML=JSONarray.eat[1].morning;

  //document.getElementById("jsonarray").innerHTML=JSONarray.交通工具[1].car;

  </script>

  </body>

</html>

JavaScript遍历JSON数组

<!DOCTYPE html>

<html>

  <head>

    <title>JSONarray.html</title>

  </head>

  <body>

    <script type="text/javascript">

       var data=[{name:"cat1",age:"12"},{name:"cat2",age:"13"},{name:"cat3",age:"14"}];

       //alert(data.length);

       //for循环遍历方式

       for(var i=0;i<data.length;i++){

          console.log("key:"+data[i].name+"---value:"+data[i].age);

       }

      

       //for...in方式遍历

       for(var da in data){

          console.log("【key:"+data[da].name+"】;【value:"+data[da].age+"】");

       }     

    </script>

  </body>

</html>

 

JSON的应用

JSON 文本转为 JavaScript 对象

JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为HttpRequest），将 JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。

JSON 语法是 JavaScript 语法的子集，JavaScript函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。

eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成JavaScript 对象。必须把文本包围在括号中，这样才能避免语法错误：

<!DOCTYPE html>

<html>

  <head>

    <title>JSONarray.html</title>

  </head>

  <h3>获取JSON字符串创建的对象</h3>

  <p>

  <span id="firstName"></span><br/>

  <span id="lastName"></span>

  </p>

  <body>

    <script type="text/javascript">

       var txt = '{"employees":[' +

            '{"firstName":"Hello","lastName":"Anhui" },' +

            '{"firstName":"George","lastName":"Bush" },' +

            '{"firstName":"Thomas","lastName":"Carter" }]}';

      var obj = eval("("+txt+")");

      console.log(obj);

      document.getElementById("firstName").innerHTML=obj.employees[0].firstName;

      document.getElementById("lastName").innerHTML=obj.employees[0].lastName;

    </script>

  </body>

</html>

 

JSON解析器

使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。JSON 解析器只能识别 JSON 文本，而不会编译脚本。在浏览器中，这提供了原生的 JSON 支持，而且 JSON 解析器的速度更快。

<!DOCTYPE html>

<html>

  <head>

    <title>JSONarray.html</title>

  </head>

  <h3>获取JSON字符串创建的对象</h3>

  <p>

  <span id="firstName"></span><br/>

  <span id="lastName"></span>

  </p>

  <body>

    <script type="text/javascript">

       var txt = '{"employees":[' +

            '{"firstName":"Hello","lastName":"Anhui" },' +

            '{"firstName":"George","lastName":"Bush" },' +

            '{"firstName":"Thomas","lastName":"Carter" }]}';

      //var obj = eval("("+txt+")");

      var obj = JSON.parse(txt);

      console.log("JSON解析器："+obj);

      document.getElementById("firstName").innerHTML="++"+obj.employees[0].firstName;

      document.getElementById("lastName").innerHTML="++"+obj.employees[0].lastName;

    </script>

  </body>

</html>

午-夜
关注
专栏目录
JSON 基本使用
m0_63760882的博客
04-29 3979
1. JSON 是什么？ JSON，全称是 JavaScript Object Notation，即 JavaScript对象标记法。 JSON是一种轻量级（Light-Meight)、基于文本的(Text-Based)、可读的(Human-Readable)格式。 JSON 的名称中虽然带有JavaScript，但这是指其语法规则是参考JavaScript对象的，而不是指只能用于JavaScript语言。 JSON无论对于人，还是对于机器来说，都是十分便于阅读和书写的，而且相比 XML(另一种常见的数据
json基本介绍及优缺点.zip
06-08
文档.pdf中可能详细介绍了以下JSON的基本概念和使用方法： 1. **基本结构**：JSON的基本结构包括对象和数组。对象以大括号包围，键值对用冒号分隔，多个键值对之间用逗号分隔。数组以方括号包围，元素之间用逗号...
JSON
csyyyyyy的博客
08-27 131
1> 概念 JSON JavaScript 对象表示法（JavaScript Object Notation） 是一种存储数据的方式。 2> 创建JSON对象 var user = {"uname":"admin","upwd":123456}; 这样就创建了一个JSON 对象 JSON对象由 名称/值对组成 名称和值之间用冒号:隔开 名称必须用双引号" 包含起来 值可以是任意javascript数据类型，字符串，布尔，数字 ，数组甚至是对象 不同的名称/
JSON详解
最新发布
敲厉害的燕宝的博客
07-14 3684
JSON 和 XML 各有优势，选择哪种格式取决于具体的应用需求。如果需要在 Web 应用中快速传输数据，JSON 是更好的选择；如果需要高度结构化的数据格式和跨语言的兼容性，XML 可能更适合。
Json基本概念
X-Prince的博客
12-29 1826
一、JSON ：javascript对象表示法(Javascript Object Notation) 是一种轻量级的数据交换格式。 JSON 语法是 JavaScript 对象表示语法的子集。是存储和交换文本信息的语法，类似于XML。 二、JSON和XML比较： （1）JSON长度和XML的格式比起来显得短小； （2）JSON读写速度更快 （3）JSON可以使用javascri
json的基本概念与使用
weixin_44560342的博客
08-06 1403
json的基本概念与使用 开发工具与关键技术：MyEclipse 10/Java 作者：cxxone 撰写时间：2019年08月04日 1、 基本概念： JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation） JSON 是轻量级的文本数据交换格式 JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然...
json概念
05-06 424
JSON(JavaScript Object Notation) 类似与 XML; 虽始于 JavaScript, 但被多种语言支持, 它也成了 Delphi 2009 的新功能之一 用 json 可以表示一个对象: {"id":2, "name":"张三", "age":99} json 中:元素与值用冒号 ":" 隔开元素与元素用逗号 "," 隔开{} 之间是一个对象, 对
JSon的介绍即使用方法
07-04
在本文中，我们将深入探讨JSON的基本概念、结构以及如何在各种编程语言中使用它。 1. JSON的结构： JSON基于两种基本数据类型：对象和数组。对象是以花括号 `{}` 包裹的键值对集合，键（key）和值（value）之间用...
json.rar_JSON_json 文件流_json文件_json转成流_流和json的转化
09-24
综上所述，理解JSON的基本概念和操作，包括编码、数据流转换、序列化与反序列化以及流式处理，对于进行高效、安全的数据交换至关重要。在实际开发中，根据具体需求选择合适的库和方法，可以极大地简化JSON相关的工作...
Json的概念
yaomian1999的博客
06-15 418
json
JSON基本概念及使用
weixin_34247155的博客
05-11 122
JSON：JavaScript 对象表示法（JavaScript Object Notation）。 JSON 是存储和交换文本信息的语法。类似 XML。 JSON 比 XML 更小、更快，更易解析。 1. JSON数据基本类型 JSON实际上是JavaScript的一个子集。在JSON中，一共就这么几种数据类型： number：和JavaScript的number完全一致； ...
JSON概念
weixin_47511190的博客
07-13 77
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> /** * json是由键值对组成，并且由花括号包围，每个键由引号引起来，键和值之间使用冒号 * 进行分隔，多组键值对之间进行逗号进行分隔 *
JSON 概念
心晴部落
03-09 917
<br /><br />JSON概念<br /> <br />JSON是什么？JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python
【学习笔记】JSON基础概念简介
少年休闲海
06-14 635
JSON是什么？ JSON即JavaScript Object Notation，是Javascript对象原生的一种表现形式。它是一种轻量级的、纯文本的，用来存储、传递和交货文本信息的格式。 JSON的优势： 同XML或者HTML相比，JSON更加灵活简单； JSON是基于纯文本的数据格式，便于在网络上传入和解析； JSON的数据格式简单，但可以传输任何类型（包括JS对象和数组）； JSON是Javascript原生格式，在JS中处理JSON数据不需要任何特殊的API或者工具包； 格式.
JSON基本概念
yunteng0923的博客
09-03 242
JSON（JavaScript Object Natation）： JavaScript的对象表现形式，但是目前已经发展成一种轻量级的数据交换格式 特点：完全独立于语言的文本格式，跨平台！有结构的，方便人和机器解析。 使用场景：   1：不同语言之间的数据传递（JSON就是String，但是它是有格式的），后台LIst转换成JSON然后前台才可以解析   2：SSH  EasyUI AJ
json基本概念
12-29 171
JSON：JavaScript 对象表示法（JavaScript Object Notation）， 是存储和交换文本信息的语法。类似 XML，比 XML 更小、更快，更易解析。JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 JSON 语法规则：1、数据在名称/值对中。2、数据由逗号分隔。3
JSON的概念和语法规则
wujinpengjiusan的博客
04-19 379
JSON的概念; JSON是一种轻量级的数据交换格式,它基于ECMAScript的一个子集, 采用完全独立于编程语言的文本格式来存储和表示数据. JSON的语法规则: 1.数据在名次/值对中 2.数据由逗号分隔 3.大括号保存对象 4.中括号保存数组 JSON的名称/值对 JSON数据的书写格式是:名称/值对. JSON值:可以是数字.字符串.数组.逻辑值.对象.null JSON值{ 数字(整数...
使用jQuery Mobile和JSON构建移动Web应用
通过本教程的学习，开发者不仅能掌握jQuery Mobile的基本用法，还能了解到如何设计一个与后端服务无缝对接的移动Web应用，以及如何实现跨平台兼容性。 jQuery Mobile 和 JSON 的结合为移动Web开发提供了强大的工具...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值