json详解

axinawang

已于 2023-11-06 19:37:17 修改

阅读量480

点赞数

分类专栏：其他文章标签： json android

于 2018-02-21 22:05:55 首次发布

本文链接：https://blog.csdn.net/daqi1983/article/details/79344469

版权

其他专栏收录该内容

7 篇文章 0 订阅

订阅专栏

概述

概念：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详解

1.$.ajax({ type:"get", url:"&lt;%=basePath%&gt;customer/detail.action", data:{"id":id}, success:function(data) {data:{"id":id}看着像json格式，但不是，...
复制链接

扫一扫