JSON的基本概念和用法

最新推荐文章于 2024-08-17 23:14:52 发布
最新推荐文章于 2024-08-17 23:14:52 发布
阅读量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基本介绍及优缺点.zip
06-08
文档.pdf中可能详细介绍了以下JSON的基本概念和使用方法： 1. **基本结构**：JSON的基本结构包括对象和数组。对象以大括号包围，键值对用冒号分隔，多个键值对之间用逗号分隔。数组以方括号包围，元素之间用逗号...
json的定义
weixin_47295886的博客
11-01 979
JS对象转JSON—JSON.stringify(obj1)——在IE7以下浏览器不支持JSON.parse(json)——json转js对象-并返回eval()函数——可以执行一段字符串形式的JS代码，并将结果返回 ——执行的字符串中含有{}。则会将作为代码块，不希望当成代码块，需要在字符串之后加（）
JSON定义方法
XiaoXiao_Lin的博客
09-28 1977
JSON可以嵌套json 可以用点（.）或者[]来访问或者修改对象属性：myobj.sites【"sites1"】=""; 注意：中括号中要有引号 数组中也可以有数组： 用for in 或者用for循环遍历 JSON.parse() 方法将数据转换为 JavaScript 对象。 传入第一个值：json对象 第二个值：处理结果的函数，可选。每个结果都会执行该函数 JSON.stringify() 方法将 JavaScript 对象转换为字符串。 eval() 可用于..
JSON简介
weixin_72280926的博客
08-17 3622
JSON是一种轻量级的数据交换格式，它基于JavaScript中的一个子集定义。JSON是JavaScript Object Notation的缩写，但它是语言无关的，这意味着JSON可以在任何编程语言中使用，不仅限于JavaScript。1、映射用冒号（“：”）表示。名称:值2、并列的数据之间用逗号（“，”）分隔。名称1:值1,名称2:值23、 映射的集合（对象）用大括号（“{}”）表示。{名称1:值1,名称2:值2}4、并列数据的集合（数组）用方括号(“[]”)表示。
JSON的定义
惜忆隐蝶
05-25 8596
JSON的定义：        一种轻量级的数据交换格式，具有良好的可读和便于快速编写的特性。业内主流技术为其提供了完整的解决方案（有点类似于正则表达式 ，获得了当今大部分语言的支持），从而可以在不同平台间进行数据交换。JSON采用兼容性很高的文本格式，同时也具备类似于C语言体系的行为。 – Json.org JSON Vs XML     1.JSON和XML的数据
JSON 基本使用
m0_63760882的博客
04-29 4017
1. JSON 是什么？ JSON，全称是 JavaScript Object Notation，即 JavaScript对象标记法。 JSON是一种轻量级（Light-Meight)、基于文本的(Text-Based)、可读的(Human-Readable)格式。 JSON 的名称中虽然带有JavaScript，但这是指其语法规则是参考JavaScript对象的，而不是指只能用于JavaScript语言。 JSON无论对于人，还是对于机器来说，都是十分便于阅读和书写的，而且相比 XML(另一种常见的数据
JSon的介绍即使用方法
07-04
在本文中，我们将深入探讨JSON的基本概念、结构以及如何在各种编程语言中使用它。 1. JSON的结构： JSON基于两种基本数据类型：对象和数组。对象是以花括号 `{}` 包裹的键值对集合，键（key）和值（value）之间用...
js下xml转json和json转xml
06-10
在JavaScript（JS）环境中，XML（Extensible Markup ...总之，XML和JSON之间的转换在JavaScript环境下是常见的需求，了解其基本原理和方法对于Web开发至关重要。同时，掌握和利用现有的转换库能进一步提升开发效率。
javabean和json转换_javabean2json_
09-28
除了Gson之外，其他的库如Jackson和Fastjson也有类似的API，但使用方法略有不同。例如，使用Jackson，我们需要添加对应的依赖，并使用`ObjectMapper`类进行转换： ```java import ...
十二、前端开发中的事件机制和JSON使用详解
最新发布
11-13
内容概要：本文围绕前端开发中重要的事件处理技术和数据交换格式JSON进行了深入剖析。...阅读建议：阅读时应重点注意事件相关API的具体用法及其兼容处理方式，同时通过实际编码练习加深对JSON格式的理解和使用。
json定义json定义json定义json定义json定义
03-25
json定义json定义json定义json定义json定义json定义json定义json定义json定义json定义
JSON教程（非常详细）
比起日出，我更喜欢日落。我的意思是比起遇见你，我更喜欢与你终老
05-01 6550
使用 Ajax 异步加载的数据；RPC 远程调用；前后端分离，后端返回的数据；开发 API，例如百度、高德的一些开放接口。"age": {},},上面 Schema 中，要求 JSON 数据必须符合以下要求类型为 object；JSON 中可以包含以下四个键：name：必须是字符串类型；email：必须是字符串类型；age：必须是大于 0 的整数；telephone：必须是字符串类型，并且需要匹配指定的正则表达式。
JSON详解
敲厉害的燕宝的博客
07-14 3904
JSON 和 XML 各有优势，选择哪种格式取决于具体的应用需求。如果需要在 Web 应用中快速传输数据，JSON 是更好的选择；如果需要高度结构化的数据格式和跨语言的兼容性，XML 可能更适合。
JSON百科全书：学习JSON看这一篇就够了
热门推荐
青春木鱼的博客
06-30 2万+
JSON 对象包含两个方法：用于解析 JavaScript Object Notation（JSON）的 parse() 方法，以及将对象/值转换为 JSON 字符串的 stringify() 方法。除了这两个方法，JSON 这个对象本身并没有其他作用，也不能被调用或者作为构造函数调用。
JSON 的定义
m0_49096264的博客
02-08 1541
JSON 是存储和交换文本信息的语法。类似 XML。
JSON开发详解
09-30
JSON 是轻量级的文本数据交换格式，JSON 文本格式在语法上与创建 JavaScript 对象的代码相同，JSON 比 XML 更小、更快，更易解析。主要内容包括：JSON简介、JSON 语法、JSON使用、JSONP等。
什么是json
qfzhaohan的博客
12-16 5427
一、什么是json？ json的全称为：JavaScript Object Notation，是一种轻量级的数据交互格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。【以上来自于百度百科】 简单来说：json就是一种在各个编程语言中流通的数据格式，负责不同编程语言中的数据传递和交互。 类似于： 国际通用语言-英语 中国56个民族不同地区的通用语言-普通话。 但真要说json到底是什么，以及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、付费专栏及课程。

余额充值