JSON的基本概念和用法

最新推荐文章于 2024-05-01 21:03:53 发布
最新推荐文章于 2024-05-01 21:03:53 发布
阅读量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>

午-夜
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JSON最常用的两种数据解析方法
weixin_46831561的博客
06-04 1608
一、什么是JSON？ JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。 我们以一本书对象为例，看看在Java，JS，XML和JSON的书写区别 //Java public class
json格式
m0_46570170的博客
04-07 196
定义json <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> <!--定义json--> var json = { "name": "张三", ...
【JSON是什么】&【JSON的基本使用】
热爱编程、热爱生活、热爱探索
09-06 2249
什么是JSON？JSON（JavaScriptObject Notation, JS对象简谱）是一种轻量级的数据交换格式，同时也是一种JavaScript对象表示法。它基于ECMAScript（European Computer Manufacturers Association, 欧洲计算机协会制定的js规范）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。JSON原本是JS对象的字符串表示法。
json-head:JSON微服务，用于执行HEAD请求
05-08
json-head JSON（和JSON-P）API，用于对URL运行HEAD请求。 可以在以下位置找到旧版App Engine实用程序的源代码： :
JSON教程（非常详细）
比起日出，我更喜欢日落。我的意思是比起遇见你，我更喜欢与你终老
05-01 4146
使用 Ajax 异步加载的数据；RPC 远程调用；前后端分离，后端返回的数据；开发 API，例如百度、高德的一些开放接口。"age": {},},上面 Schema 中，要求 JSON 数据必须符合以下要求类型为 object；JSON 中可以包含以下四个键：name：必须是字符串类型；email：必须是字符串类型；age：必须是大于 0 的整数；telephone：必须是字符串类型，并且需要匹配指定的正则表达式。
json原理和应用
wangrenhaioylj的博客
10-23 1378
没有实际项目，上课讲的不透彻，json应用场景讲了，但是具体没讲到点子上，等云盘项目的例子在看吧！ cjson rapijson用来解析json，序列化反序列化，生成对应语言的代码供开发者调用。 json、xml序列化反序列化方案：具体实例 ...
json基本介绍及优缺点.zip
06-08
文档.pdf中可能详细介绍了以下JSON的基本概念和使用方法： 1. **基本结构**：JSON的基本结构包括对象和数组。对象以大括号包围，键值对用冒号分隔，多个键值对之间用逗号分隔。数组以方括号包围，元素之间用逗号...
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 ...
python中json格式数据的编码和解码1
08-08
了解这些基本的编码和解码操作后，开发者可以根据需要进一步探索JSON在Python中的高级用法，例如处理嵌套结构、自定义序列化和反序列化行为等。在实际开发中，JSON常用于Web服务之间的数据交换，因为它具有简洁性和...
JSON的简单介绍和使用
remakeprogramer的博客
01-26 2767
Json 一、什么是Json JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式，目前使用特别广泛。 采用完全独立于编程语言的文本格式来存储和表示数据。 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。 在 JavaScript 语言中，一切都是对象。因此，任何JavaScript 支持的类型都可以通过 JSON 来表示，例如字符串、数字、对象、数组等。看看他的
Json基本概念
X-Prince的博客
12-29 1815
一、JSON ：javascript对象表示法(Javascript Object Notation) 是一种轻量级的数据交换格式。 JSON 语法是 JavaScript 对象表示语法的子集。是存储和交换文本信息的语法，类似于XML。 二、JSON和XML比较： （1）JSON长度和XML的格式比起来显得短小； （2）JSON读写速度更快 （3）JSON可以使用javascri
json的基本概念与使用
weixin_44560342的博客
08-06 1387
json的基本概念与使用 开发工具与关键技术：MyEclipse 10/Java 作者：cxxone 撰写时间：2019年08月04日 1、 基本概念： JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation） JSON 是轻量级的文本数据交换格式 JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然...
json header
滕青山博客
01-09 838
content-type:application/json;
JSON
csyyyyyy的博客
08-27 125
1> 概念 JSON JavaScript 对象表示法（JavaScript Object Notation） 是一种存储数据的方式。 2> 创建JSON对象 var user = {"uname":"admin","upwd":123456}; 这样就创建了一个JSON 对象 JSON对象由 名称/值对组成 名称和值之间用冒号:隔开 名称必须用双引号" 包含起来 值可以是任意javascript数据类型，字符串，布尔，数字 ，数组甚至是对象 不同的名称/
简单透彻理解JSONP原理及使用
热门推荐
Inite的博客
05-16 1万+
参考地址：https://blog.csdn.net/u011897301/article/details/52679486http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html。 感觉看下来清晰明了，自己也跟着代码亲测了一遍，确实可行。我自己测试时，在本地设置虚拟主机，这样就拥有两个域名可...
JSON数据的HTTP Header应该怎么标记？
weixin_34410662的博客
09-20 692
第一种 header('Content-type: application/json'); 另一种 header('Content-type: text/json'); 转载于:https://www.cnblogs.com/bubaya/p/7565048.html
RestFul如何传入json串 和返回json串
最新发布
07-10
在RESTful API中，使用JSON（JavaScript Object Notation）进行数据交换是非常常见的。这里我会简单介绍如何在客户端请求时发送JSON字符串，以及服务器端如何处理并返回JSON响应。 **客户端（如使用HTTP客户端或浏览器）发送JSON字符串**： 1. **GET请求**: 使用`application/json` Content-Type, 示例： ```csharp string jsonString = "{\"name\":\"John\", \"age\":30}"; HttpWebRequest request = (HttpWebRequest)WebRequest.Create("http://api.example.com/endpoint"); request.Method = "GET"; request.ContentType = "application/json"; using (StreamWriter writer = new StreamWriter(request.GetRequestStream())) { writer.Write(jsonString); } ``` 2. **POST请求**: 同样设置Content-Type为`application/json`, 但通常包含在请求体中： ```csharp var jsonContent = new StringContent(jsonString, Encoding.UTF8, "application/json"); HttpClient client = new HttpClient(); client.PostAsync("http://api.example.com/endpoint", jsonContent).Wait(); ``` **服务器端（例如ASP.NET Core）接收并处理JSON请求**： 1. 创建一个控制器方法接收JSON参数： ```csharp [HttpPost] public JsonResult PostData([FromBody] dynamic jsonData) { // 检查和解析jsonData var name = jsonData.name; int age = (int)jsonData.age; // 对数据进行处理 // ... return Ok(new { message = "Received data", data = /* 返回的Json对象 */ }); } ``` 注意这里用`dynamic`类型是为了临时处理可能未知结构的JSON，但在实际项目中应尽量明确类型。 2. 如果要返回JSON响应： ```csharp return JsonConvert.SerializeObject(responseObject, Formatting.Indented); // 或者其他格式 ``` 这里`JsonConvert.SerializeObject()`用于将对象转换为JSON字符串。 **相关问题--:** 1. RESTful API的基本概念是什么？ 2. 如何在C#中设置HTTP请求头来指定Content-Type？ 3. 如何在ASP.NET Core中使用JsonSerializer序列化和反序列化？ 4. 除了动态类型，还有哪些方法可以更安全地处理不同结构的JSON？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值