Java Web——JS和JSON之间的数据转换

简介: Java Web——JS和JSON之间的数据转换

1.什么是JSON?


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

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

·       JSON 英文全称JavaScript Object Notation

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

·       JSON是独立的语言*

·       JSON 易于理解。

JSON格式在语法上与创建 JavaScript 对象代码是相同的。

由于它们很相似,所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。

2.JSON的语法规则


·       数据为/对。

·       数据由逗号分隔。

·       大括号保存对象

·       方括号保存数组


JSON 数据 - 一个名称对应一个值

JSON数据格式为/对,就像 JavaScript 对象属性。

/值对包括字段名称(在双引号中),后面一个冒号,然后是值:

"name":"baidu"


JSON 对象

 

JSON对象保存在大括号内。

就像在 JavaScript , 对象可以保存多个/对:

{"name":"baidu", "url":"www.baidu.com"}

JSON 数组


JSON数组保存在中括号内。

就像在 JavaScript , 数组可以包含对象:

"sites":[ {"name":"baidu", "url":"www.baidu.com"}, {"name":"Google", "url":"www.google.com"}, {"name":"Taobao", "url":"www.taobao.com"} ]

在以上实例中,对象 "sites" 是一个数组,包含了三个对象。

每个对象为站点的信息(网站名和网站地址)。


相关函数

函数

描述

JSON.parse()

用于将一个 JSON 字符串转换为 JavaScript 对象。

JSON.stringify()

用于将 JavaScript 值转换为 JSON 字符串。

3.JS和JSON之间的数据转换


3.1 实例一 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Title</title>
  </head>
  <body>
    <script type="text/javascript">
      //定义一个js对象
      var obj={
        name: "宋子浩",
        age: 21,
        sex: "男"
      };
      console.log(obj);
      //把js对象转化为json串
      var json=JSON.stringify(obj);
      console.log(json);
      //把json串解析为js对象
      var str=JSON.parse(json);
      console.log(str);
      //定义一个json串,把json串解析为js对象
      var data='{"name":"宋子浩","age":21,"sex":"男"}';
      console.log(JSON.parse(data));
    </script>
  </body>
</html>


3.2 实例二

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Title</title>
  </head>
  <body>
    <script type="text/javascript">
      //定义一个js数组
      var obj=[{
        name: "小哥",
        age: 20,
        sex: "男"
      },{
        name: "张起灵",
        age: 20,
        sex: "男"
      }];
      console.log(obj);
      //把js数组转化为json串
      var json=JSON.stringify(obj);
      console.log(json);
      //把json串解析为js数组
      var str=JSON.parse(json);
      console.log(str);
      //定义一个json串,把json串解析为js数组
      var data='[{"name":"小哥","age":20,"sex":"男"},{"name":"张起灵","age":20,"sex":"男"}]';
      console.log(JSON.parse(data));
    </script>
  </body>
</html>

相关文章
|
15天前
|
前端开发 JavaScript 开发者
JavaScript:无处不在的Web语言
JavaScript:无处不在的Web语言
|
15天前
|
安全 Java API
Java Web 在线商城项目最新技术实操指南帮助开发者高效完成商城项目开发
本项目基于Spring Boot 3.2与Vue 3构建现代化在线商城,涵盖技术选型、核心功能实现、安全控制与容器化部署,助开发者掌握最新Java Web全栈开发实践。
188 1
|
26天前
|
机器学习/深度学习 JSON 监控
淘宝拍立淘按图搜索与商品详情API的JSON数据返回详解
通过调用taobao.item.get接口,获取商品标题、价格、销量、SKU、图片、属性、促销信息等全量数据。
|
14天前
|
JSON 缓存 自然语言处理
多语言实时数据微店商品详情API:技术实现与JSON数据解析指南
通过以上技术实现与解析指南,开发者可高效构建支持多语言的实时商品详情系统,满足全球化电商场景需求。
|
14天前
|
存储 前端开发 Java
【JAVA】Java 项目实战之 Java Web 在线商城项目开发实战指南
本文介绍基于Java Web的在线商城技术方案与实现,涵盖三层架构设计、MySQL数据库建模及核心功能开发。通过Spring MVC + MyBatis + Thymeleaf实现商品展示、购物车等模块,提供完整代码示例,助力掌握Java Web项目实战技能。(238字)
132 0
|
27天前
|
JSON API 数据格式
干货满满!淘宝商品详情数据,淘宝API(json数据返回)
淘宝商品详情 API 接口(如 taobao.item.get)的 JSON 数据返回示例如下
|
15天前
|
前端开发 JavaScript 开发者
JavaScript:构建动态Web的核心力量
JavaScript:构建动态Web的核心力量
|
15天前
|
JavaScript 前端开发 开发者
JavaScript:驱动现代Web的核心引擎
JavaScript:驱动现代Web的核心引擎
|
13天前
|
JSON API 数据安全/隐私保护
Python采集淘宝评论API接口及JSON数据返回全流程指南
Python采集淘宝评论API接口及JSON数据返回全流程指南
|
15天前
|
JavaScript 前端开发 物联网
JavaScript:驱动现代Web的核心引擎
JavaScript:驱动现代Web的核心引擎

热门文章

最新文章