json详解

已于 2023-11-06 19:37:17 修改
阅读量494 收藏 1
点赞数
分类专栏： 其他 文章标签： json android
于 2018-02-21 22:05:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daqi1983/article/details/79344469
版权

概述

概念：JavaScript Object Notation。JavaScript 对象表示法.

如下是 JavaScript 对象的定义格式：

{
	name:"zhangsan",
	age:23,
	city:"北京"
}

接下来我们再看看 JSON 的格式：  

{
	"name":"zhangsan",
	"age":23,
	"city":"北京"
}

这两种格式的区别是json 格式中的键必须使用双引号括起来，而js对象格式无所谓。

作用：由于其语法格式简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。

 ajax 就是异步的 JavaScript 和 xml。这里的 xml就是以前进行数据传递的方式，如下：  

<student>
    <name>张三</name>
    <age>23</age>
    <city>北京</city>
</student>

跟上面的json格式一对比后就会发现 json 格式数据的简单，以及所占的字节数少等优点。  

JSON 基础语法

定义格式

JSON 本质就是一个字符串，但是该字符串内容是有一定的格式要求的。 定义格式如下：

var 变量名 = '{"key":value,"key":value,...}';

 JSON 串的键要求必须使用双引号括起来，而值根据要表示的类型确定。value 的数据类型分为如下：

  • 数字（整数或浮点数）

  • 字符串（使用双引号括起来）

  • 逻辑值（true或者false）

  • 数组（在方括号中）

  • 对象（在花括号中）

  • null

示例：

var jsonStr = '{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}';

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //1. 定义JSON字符串
    var jsonStr = '{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}'
    alert(jsonStr);

</script>
</body>
</html>

JSON 串与js对象互转

JS 提供了一个对象 JSON ，该对象有如下两个方法：

  • parse(str) ：将 JSON串转换为 js 对象。使用方式是： var jsObject = JSON.parse(jsonStr);

  • stringify(obj) ：将 js 对象转换为 JSON 串。使用方式是：var jsonStr = JSON.stringify(jsObject);

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //1. 定义JSON字符串
    var jsonStr = '{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}'
    alert(jsonStr);

    //2. 将 JSON 字符串转为 JS 对象
    let jsObject = JSON.parse(jsonStr);
    alert(jsObject)
    alert(jsObject.name)
    //3. 将 JS 对象转换为 JSON 字符串
    let jsonStr2 = JSON.stringify(jsObject);
    alert(jsonStr2)
</script>
</body>
</html>

如何获取json串中的各个value

 将 JSON 字符串转为 JS 对象，就可以通过 js对象.属性名 的方式来获取数据。

axios发送异步请求携带参数

我们只需要将需要提交的参数封装成 js 对象，并将该 js 对象作为 axios 的 data 属性值进行，它会自动将 js 对象转换为 JSON 串进行提交。如下：

var jsObject = {name:"张三"};

axios({
    method:"post",
    url:"http://localhost:8080/ajax-demo/axiosServlet",
    data:jsObject  //这里 axios 会将该js对象转换为 json 串的
}).then(function (resp) {
    alert(resp.data);
});

 ==注意：==

  • js 提供的 JSON 对象我们只需要了解一下即可。因为 axios 会自动对 js 对象和 JSON 串进行相互转换。

  • 发送异步请求时，如果请求参数是 JSON 格式，那请求方式必须是 POST。因为 JSON 串需要放在请求体中。

JSON串和Java对象的相互转换

在后端我们就需要重点学习以下两部分操作：

  • 请求数据：JSON字符串转为Java对象

  • 响应数据：Java对象转为JSON字符串

接下来给大家介绍一套 API，可以实现上面两部分操作。这套 API 就是 Fastjson

Fastjson 概述

Fastjson 是阿里巴巴提供的一个Java语言编写的高性能功能完善的 JSON 库，是目前Java语言中最快的 JSON 库，可以实现 Java 对象和 JSON 字符串的相互转换。

Fastjson 使用

导入坐标

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.62</version>
</dependency>

Java对象转JSON

String jsonStr = JSON.toJSONString(obj);

JSON字符串转Java对象

User user = JSON.parseObject(jsonStr, User.class);

代码演示

public class FastJsonDemo {

    public static void main(String[] args) {
        //1. 将Java对象转为JSON字符串
        User user = new User();
        user.setId(1);
        user.setUsername("zhangsan");
        user.setPassword("123");

        String jsonString = JSON.toJSONString(user);
        System.out.println(jsonString);//{"id":1,"password":"123","username":"zhangsan"}


        //2. 将JSON字符串转为Java对象
        User u = JSON.parseObject("{\"id\":1,\"password\":\"123\",\"username\":\"zhangsan\"}", User.class);
        System.out.println(u);
    }
}

案例

需求

使用Axios + JSON 完成品牌列表数据查询和添加。页面效果如下图所示：  

查询所有功能

环境准备

这里不考虑数据库的操作，所以我做了简化，去掉了service、dao，创建了一个类模拟数据库。

下载brand-demo 工程并拷贝到我们自己 工作空间 ，再将项目导入。工程目录结构如下：

后端实现

在 com.itheima.web 包下创建名为 SelectAllServlet 的 servlet，具体的逻辑如下：

  • 调用BrandDB 的 selectAll() 方法进行查询所有的逻辑处理

  • 将查询到的集合数据转换为 json 数据。我们将此过程称为 序列化；如果是将 json 数据转换为 Java 对象，我们称之为 反序列化。

  • 将 json 数据响应回给浏览器。这里一定要设置响应数据的类型及字符集 response.setContentType("text/json;charset=utf-8");

 SelectAllServlet 代码如下：

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 调用BrandDB查询
        Collection<Brand> brands = BrandDB.selectAll();

        //2. 将集合转换为JSON数据   序列化
        String jsonString = JSON.toJSONString(brands);

        //3. 响应数据
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(jsonString);
    }

前端实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="addBrand.html"><input type="button" value="新增"></a><br>
<hr>
<table id="brandTable" border="1" cellspacing="0" width="100%">
    <tr>
        <th>序号</th>
        <th>品牌名称</th>
        <th>企业名称</th>
        <th>排序</th>
        <th>品牌介绍</th>
        <th>状态</th>
        <th>操作</th>
    </tr>
    <tr align="center">
        <td>1</td>
        <td>三只松鼠</td>
        <td>三只松鼠</td>
        <td>100</td>
        <td>三只松鼠，好吃不上火</td>
        <td>启用</td>
        <td><a href="#">修改</a> <a href="#">删除</a></td>
    </tr>

    <tr align="center">
        <td>2</td>
        <td>优衣库</td>
        <td>优衣库</td>
        <td>10</td>
        <td>优衣库，服适人生</td>
        <td>禁用</td>

        <td><a href="#">修改</a> <a href="#">删除</a></td>
    </tr>

    <tr align="center">
        <td>3</td>
        <td>小米</td>
        <td>小米科技有限公司</td>
        <td>1000</td>
        <td>为发烧而生</td>
        <td>启用</td>

        <td><a href="#">修改</a> <a href="#">删除</a></td>
    </tr>
</table>

<!-- 引入 js 文件 -->
<script src="js/axios-0.18.0.js"></script>

<script>
    //1. 当页面加载完成后，发送ajax请求
    window.onload = function () {
        //2. 发送ajax请求
        axios({
            method:"get",
            url:"http://localhost:8080/brand-demo/selectAllServlet"
        }).then(function (resp) {
            //获取数据
            let brands = resp.data;
            let tableData = " <tr>\n" +
                "        <th>序号</th>\n" +
                "        <th>品牌名称</th>\n" +
                "        <th>企业名称</th>\n" +
                "        <th>排序</th>\n" +
                "        <th>品牌介绍</th>\n" +
                "        <th>状态</th>\n" +
                "        <th>操作</th>\n" +
                "    </tr>";

            for (let i = 0; i < brands.length ; i++) {
                let brand = brands[i];
//从 `brand` 对象中获取数据并且拼接 `数据行`，累加到 `tableData` 字符串变量中
                tableData += "\n" +
                    "    <tr align=\"center\">\n" +
                    "        <td>"+(i+1)+"</td>\n" +
                    "        <td>"+brand.brandName+"</td>\n" +
                    "        <td>"+brand.companyName+"</td>\n" +
                    "        <td>"+brand.ordered+"</td>\n" +
                    "        <td>"+brand.description+"</td>\n" +
                    "        <td>"+brand.status+"</td>\n" +
                    "\n" +
                    "        <td><a href=\"#\">修改</a> <a href=\"#\">删除</a></td>\n" +
                    "    </tr>";
            }

            // 设置表格数据
            document.getElementById("brandTable").innerHTML = tableData;
        })
    }



</script>
</body>
</html>

添加品牌功能

分析

如上所示，当我们点击 新增 按钮，会跳转到 addBrand.html 页面。在 addBrand.html 页面输入数据后点击 提交 按钮，就会将数据提交到后端，而后端将数据保存到数据库中。

具体的前后端交互的流程如下：

 

后端实现

这里不考虑数据库的操作，所以我做了简化，去掉了service、dao。 

在 com.itheima.web 包下创建名为 AddServlet 的 servlet，具体的逻辑如下：

  • 获取请求参数

    由于前端提交的是 json 格式的数据，所以我们不能使用 request.getParameter() 方法获取请求参数

    • 如果提交的数据格式是 username=zhangsan&age=23 ，后端就可以使用 request.getParameter() 方法获取

    • 如果提交的数据格式是 json，后端就需要通过 request 对象获取输入流，再通过输入流读取数据

  • 将获取到的请求参数（json格式的数据）转换为 Brand 对象

  • 调用 BrandDB 的 add() 方法进行添加数据的逻辑处理

  • 将 json 数据响应回给浏览器。

AddServlet 代码如下：

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //1. 接收数据,request.getParameter 不能接收json的数据
       /* String brandName = request.getParameter("brandName");
        System.out.println(brandName);*/

        // 获取请求体数据
        BufferedReader br = request.getReader();
        String params = br.readLine();

        // 将JSON字符串转为Java对象
        Brand brand = JSON.parseObject(params, Brand.class);


        //2. 调用service 添加
        BrandDB.add(brand);

        //3. 响应成功标识
        response.getWriter().write("success");
    }

前端实现

在 addBrand.html 页面给 提交 按钮绑定点击事件，并在绑定的匿名函数中发送异步请求，代码如下：

//1. 给按钮绑定单击事件
document.getElementById("btn").onclick = function () {
    //2. 发送ajax请求
    axios({
        method:"post",
        url:"http://localhost:8080/brand-demo/addServlet",
        data:???
    }).then(function (resp) {
        // 判断响应数据是否为 success
        if(resp.data == "success"){
            location.href = "http://localhost:8080/brand-demo/brand.html";
        }
    })
}

现在我们只需要考虑如何获取页面上用户输入的数据即可。

首先我们先定义如下的一个 js 对象，该对象是用来封装页面上输入的数据，并将该对象作为上面发送异步请求时 data 属性的值。

// 将表单数据转为json
var formData = {
    brandName:"",
    companyName:"",
    ordered:"",
    description:"",
    status:"",
};

接下来获取输入框输入的数据，并将获取到的数据赋值给 formData 对象指定的属性。比如获取用户名的输入框数据，并把该数据赋值给 formData 对象的 brandName 属性

// 获取表单数据
let brandName = document.getElementById("brandName").value;
// 设置数据
formData.brandName = brandName;

==说明：其他的输入框都用同样的方式获取并赋值。==但是有一个比较特殊，就是状态数据，如下：

状态：
    <input type="radio" name="status" value="0">禁用
    <input type="radio" name="status" value="1">启用<br>

我们需要判断哪儿个被选中，再将选中的单选框数据赋值给 formData 对象的 status 属性，代码实现如下：

let status = document.getElementsByName("status");
for (let i = 0; i < status.length; i++) {
    if(status[i].checked){
        //
        formData.status = status[i].value ;
    }
}

整体页面代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>添加品牌</title>
</head>
<body>
<h3>添加品牌</h3>
<form action="" method="post">
    品牌名称：<input id="brandName" name="brandName"><br>
    企业名称：<input id="companyName" name="companyName"><br>
    排序：<input id="ordered" name="ordered"><br>
    描述信息：<textarea rows="5" cols="20" id="description" name="description"></textarea><br>
    状态：
    <input type="radio" name="status" value="0">禁用
    <input type="radio" name="status" value="1">启用<br>

    <input type="button" id="btn"  value="提交">
</form>

<script src="js/axios-0.18.0.js"></script>

<script>
    //1. 给按钮绑定单击事件
    document.getElementById("btn").onclick = function () {
        // 将表单数据转为json
        var formData = {
            brandName:"",
            companyName:"",
            ordered:"",
            description:"",
            status:"",
        };
        // 获取表单数据
        let brandName = document.getElementById("brandName").value;
        // 设置数据
        formData.brandName = brandName;

        // 获取表单数据
        let companyName = document.getElementById("companyName").value;
        // 设置数据
        formData.companyName = companyName;

        // 获取表单数据
        let ordered = document.getElementById("ordered").value;
        // 设置数据
        formData.ordered = ordered;

        // 获取表单数据
        let description = document.getElementById("description").value;
        // 设置数据
        formData.description = description;

        let status = document.getElementsByName("status");
        for (let i = 0; i < status.length; i++) {
            if(status[i].checked){
                //
                formData.status = status[i].value ;
            }
        }
        //console.log(formData);
        //2. 发送ajax请求
        axios({
            method:"post",
            url:"http://localhost:8080/brand-demo/addServlet",
            data:formData
        }).then(function (resp) {
            // 判断响应数据是否为 success
            if(resp.data == "success"){
                location.href = "http://localhost:8080/brand-demo/brand.html";
            }
        })
    }
</script>
</body>
</html>

==说明：==

查询所有 功能和 添加品牌 功能就全部实现，大家肯定会感觉前端的代码很复杂；而这只是暂时的，后面学习了 vue 前端框架后，这部分前端代码就可以进行很大程度的简化。

1.$.ajax({
                type:"get",
                url:"<%=basePath%>customer/detail.action",
                data:{"id":id},

                success:function(data) {

data:{"id":id}看着像json格式，但不是，因为application-contentType不是json

axinawang
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
JSON详解.pptx
08-10
很好的总结了json的使用方法，很好的学习资料。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
PHP JSON详解.md
最新发布
06-13
JSON 是一种轻量级的数据交换格式，它基于 JavaScript 的一个子集，易于人阅读和编写，同时也易于机器解析和生成。在 PHP 中，你可以使用 `json_encode()` 函数将 PHP 数组或对象转换为 JSON 格式的字符串，使用 `...
JSON的三种格式，5分钟搞定
m0_60707579的博客
03-29 2379
JSON中没有undefinedJSON中的字符串必须使用双引号JSON中是不能用注释的JSON中对象的属性名必须是双引号，属性值如果是字符串也必须是双引号JSON只要涉及到字符串就必须使用双引号，不支持undefinedJSON的数组形式对应着JS中的数组形式数组中的字符串必须使用双引号JSON中只要涉及到字符串 就必须使用双引号不支持undefined。
JSON说明
Harry_123321的博客
12-21 149
1. JSON 数据的书写格式 对象：是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。 数组：是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。 数据在名称/值对中 数据由逗号分隔 ...
JSON数据格式必知
2401_84408437的博客
05-10 672
题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。但苦于知识传播途径有限，很多程序员朋友无法获得正确的资料得到学习提升，故此将并将重要的Android进阶资料包括自定义view、性能优化、MVC与MVP与MVVM三大框架的区别、NDK技术、阿里面试题精编汇总、常见源码分析等学习资料。【Android思维脑图（技能树）】
JSON——(JavaScript Object Notation, JS 对象简谱) 数据交换格式。JSON是一个序列化的对象或数组。...
diuxun9622的博客
09-11 746
JSON (JavaScriptObject Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于ECMAScript(欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。 JSON...
json的简要说明
yanghailong34290的博客
03-02 88
https://www.jianshu.com/p/986701acb442
JSON详解
坚持
03-23 770
1. 什么是JSON ​ JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。JSON 采用完全独立于语言的文本格式，而且很多语言都提供了对 json 的支持（包括 C, C++, C#, Java, JavaScript, Perl, Python 等）。 这样就使得 JSON 成为理想的数据交换格式。 json 是一种轻量级的数据交换格式。 轻量级指的是跟 xml 做比较。 数据交换指的是客户端和服务器之间业务数
JSON简介和使用说明
02-16 1352
JSON简介 JSON是JavaScript对象表示法，JavaScript Object Notation。类似于XML，是一种用来存储和交换文本信息的语法。它是一种轻量级的文本数据交换格式，独立于语言，具有自我描述性，更加易于理解。 JSON使用JavaScript语法来描述数据对象，但是JSON仍然独立于语言与平台。JSON解析器和JSON库支持许多不同的编程语言。 Javas
JSON详解.md
06-13
JSON详解
json详解.docx
09-13
JSON，全称JavaScript Object Notation，是一种轻量级的数据交换格式，因其易读性、易于编写的特点而广受欢迎。在业界，JSON得到了主流技术的全面支持，几乎在所有现代编程语言中都有相应的解析库，使其成为网络通信...
Python的标准模块包json详解
09-21
Python的标准模块包`json`是处理JSON（JavaScript Object Notation）数据的重要工具，它提供了将Python数据结构转化为JSON格式以及将JSON数据解析回Python对象的功能。JSON是一种轻量级的数据交换格式，因其易于人...
阐述返回JSON数据的使用说明介绍
寒冬玉
01-24 1004
第一步：为了使服务器端查询返回JSON数据，从网上找了个用C#写的JSONHelper类（在此感谢那位不知名的好人），以下是JsonHelper类全部代码。（JsonHelper.cs）using System;  using System.Collections;  using System.Collections.Generic;  using System.Text;  using Sy
非常详细！JSON简介（适合小白学习）
weixin_45109103的博客
03-08 2574
json学习。
json的方法
lijie154388366的博客
11-29 365
String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> "> My JSP 'list.jsp
JSON百科全书：学习JSON看这一篇就够了
青春木鱼的博客
06-30 9779
JSON 对象包含两个方法：用于解析 JavaScript Object Notation（JSON）的 parse() 方法，以及将对象/值转换为 JSON 字符串的 stringify() 方法。除了这两个方法，JSON 这个对象本身并没有其他作用，也不能被调用或者作为构造函数调用。
json_encode charset
weixin_30782293的博客
12-24 66
json_encode utf-8 mysql charset utf8 转载于:https://www.cnblogs.com/gaoj87/p/3489312.html
json格式的请求体和url编码格式（Query String 格式）的请求体
m0_74176885的博客
07-09 2592
（3.1）json格式的请求，不能通过html的form表单标签发出，一般是通过Ajax通信（包括XMLHttpRequest 和 Fetch API ）（3.2）url编码格式的请求，可以通过form表单标签发出，也可以通过Ajax通信（包括XMLHttpRequest 和 Fetch API ）发出。json格式的请求体（载荷）：{"title":"aaaa","type":1,"account":300,"remarks":"ccccc"}
Ajax学习日志（五）—— 如何传递json格式请求参数
kokunka的博客
03-27 8884
Ajax入门（五）一、如何传递json格式请求参数1.1） json格式的Content-Type是：application/json1.2) 在app.js使用use方法，并且创建路由1.3) 在public文件夹新建一个html文件1.4) 在浏览器运行 一、如何传递json格式请求参数 1.1） json格式的Content-Type是：application/json xhr.setRequestHeader('Content-Type', 'application/json'); 传递的是
vscode task.json 详解
02-02
task.json 是 Visual Studio Code 编辑器中的一个配置文件，用于定义任务（Task）的相关信息，包括任务的命令、参数、工作目录、输入输出、启动配置等。通过 task.json 文件，可以方便地配置、管理和运行各种任务。 task.json 中的常用参数包括： - label：任务的标签，用于在任务列表中显示。 - type：任务的类型，可以是 "shell"、"process" 或 "npm" 等。 - command：执行任务的命令。 - args：执行任务命令的参数。 - problemMatcher：用于匹配命令输出中的错误信息，并在编辑器中显示错误提示。 - options：任务的额外选项，例如设置任务执行时的工作目录、环境变量等。 - presentation：任务在编辑器中的显示设置，例如是否在终端中显示执行输出。 任务可以通过任务列表或者快捷键进行运行。任务列表显示了所有的任务，可以选择性地运行某个任务。此外，还可以通过快捷键将任务与编辑器的某个功能进行关联，从而实现快速执行任务。 在 task.json 文件中，常见的任务配置包括： - 编译项目：通过配置编译器的命令和参数，可以在任务列表中快速编译代码。 - 运行测试：配置测试框架的命令和参数，可以方便地运行测试用例进行调试。 - 启动服务：通过配置启动服务的命令和参数，可以在任务列表中一键启动服务。 - 打包应用：配置打包工具的命令和参数，可以自动化生成可部署的应用程序。 总之，task.json 是 Visual Studio Code 编辑器中用于配置和管理任务的关键配置文件，通过它可以提高开发效率，简化操作，实现自动化和快速执行各种任务。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值