前端学习记录 Day5（JSON）

最新推荐文章于 2024-12-24 22:14:10 发布
最新推荐文章于 2024-12-24 22:14:10 发布
阅读量249 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： JSON 文章标签： JSON
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_41151659/article/details/98171357
本文详细介绍了JSON（JavaScript Object Notation）的基本概念、语法和其与JS对象的转换方法，包括JSON字符串的生成与解析，以及如何使用Jackson工具处理JSON数据，涉及对象、集合和日期的转换。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

Day 5

2019年8月1日。
这是我学习前端的第五天。
这一天，我学到了以下的知识。

简介

JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式，目前使用特别广泛。

采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在 JS 语言中，一切都是对象。因此，任何JS支持的类型都可以通过 JSON 来表示，例如字符串、数字、对象、数组等。看看他的要求和语法格式：

  • 对象表示为键值对
  • 数据由逗号分隔
  • 花括号保存对象
  • 方括号保存数组

语法

JSON键值对

JSON 键值对是用来保存 JS 对象的一种方式，和 JS 对象的写法也大同小异，键/值对组合中的键名写在前面并用双引号 “” 包裹，使用冒号 : 分隔，然后紧接着值：

{"name": "QinJiang"}
{"age": "3"}
{"sex": "男"}

JSON和Js对象的关系

很多人搞不清楚 JSON 和 Js 对象的关系，甚至连谁是谁都不清楚。其实，可以这么理解：

JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。

var obj = {a: 'Hello', b: 'World'}; //这是一个对象，注意键名也是可以使用引号包裹的
var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串，本质是一个字符串

JSON 和 JS 对象互转

要实现从JSON字符串转换为JS对象，使用 JSON.parse() 方法：

var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}

要实现从JS对象转换为JSON字符串，使用 JSON.stringify() 方法：

var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'

实现

  1. 编写一个Html页面，来测试一下JSON的使用，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON_秦疆</title>
</head>
<body>

<script type="text/javascript">
    //编写一个js的对象
    var user = {
        name:"秦疆",
        age:3,
        sex:"男"
    };
    //将js对象转换成json字符串
    var str = JSON.stringify(user);
    console.log(str);
    //将json字符串转换为js对象
    var user2 = JSON.parse(str);
    console.log(user2.age,user2.name,user2.sex);
    
</script>

</body>
</html>
  1. 运行效果如下（在网页编辑器中查看）：
    在这里插入图片描述

使用Controller实现返回JSON数据

Jackson应该是目前比较好的json解析工具了，当然工具不止这一个，比如还有阿里巴巴的fastjson等等。

返回对象

  1. 这里使用Jackson，使用它需要导入它的jar包；
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.9.8</version>
        </dependency>
  1. 编写一个User的实体类，代码如下：
package pojo;

public class User {
    private String name;
    private int age;
    private String sex;

    public User() {
    }

    public User(String name, int age, String sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    @Override
    public String toString() {
        return "User{" +
                "name='" + name + '\'' +
                ", age=" + age +
                ", sex='" + sex + '\'' +
                '}';
    }
}
  1. 然后去编写我们的测试Controller；这里我们需要两个新东西，一个是@ResponseBody，一个是ObjectMapper对象，代码如下：
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class UserController {

    @RequestMapping("/json")
    @ResponseBody
    public String json1() throws JsonProcessingException {

        //创建一个jackson的对象映射器，用来解析数据
        ObjectMapper mapper = new ObjectMapper();
        //创建一个对象
        User user = new User("秦疆1号", 3, "男");
        //将我们的对象解析成为json格式
        String str = mapper.writeValueAsString(user);

        return str; //由于@ResponseBody注解，这里会将str转成json格式返回；十分方便
    }

}
  1. 配置tomcat，测试，发现出现乱码问题，如图所示：
    在这里插入图片描述
  2. 为了解决乱码问题，需要设置一下它的编码格式为utf-8，以及它返回的类型，通过@RequestMaping的produces属性来实现，如图所示：
    //produces:指定响应体返回类型和编码
    @RequestMapping(value = "/json",produces = "application/json;charset=utf-8")
  1. 再次测试，发现乱码问题消除，如图所示：
    在这里插入图片描述

注意：使用json记得处理乱码问题！
上一种方法比较麻烦，如果项目中有许多请求则每一个都要添加，可以通过Spring配置统一指定，这样就不用每次都去处理了！

  1. 在resources目录下新建spring-servlet.xml配置文件，代码如下：
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
    http://www.springframework.org/schema/beans/spring-beans.xsd
    http://www.springframework.org/schema/context
    http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <context:component-scan base-package="controller"/>
    <mvc:default-servlet-handler/>
    <mvc:annotation-driven>
        <!--JSON格式乱码处理方式-->
        <mvc:message-converters register-defaults="true">
            <bean class="org.springframework.http.converter.StringHttpMessageConverter">
                <constructor-arg value="UTF-8"/>
            </bean>
            <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
                <property name="objectMapper">
                    <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">
                        <property name="failOnEmptyBeans" value="false"/>
                    </bean>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>

    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" id="InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/jsp/"/>
        <property name="suffix" value=".jsp"/>
    </bean>



</beans>

返回集合

  1. 修改测试Controller，加入一个打印集合的方法，代码如下：
 @RequestMapping("/json3")
    @ResponseBody
    public String json3() throws JsonProcessingException {

        //创建一个jackson的对象映射器，用来解析数据
        ObjectMapper mapper = new ObjectMapper();
        //创建一个对象
        User user1 = new User("秦疆1号", 3, "男");
        User user2 = new User("秦疆2号", 3, "男");
        User user3 = new User("秦疆3号", 3, "男");
        User user4 = new User("秦疆4号", 3, "男");
        List<User> list = new ArrayList<>();
        list.add(user1);
        list.add(user2);
        list.add(user3);
        list.add(user4);
        //将我们的对象解析成为json格式
        String str = mapper.writeValueAsString(list);

        return str; //由于@ResponseBody注解，这里会将str转成json格式返回；十分方便
    }
  1. 运行，结果如图：
    在这里插入图片描述

返回日期

  1. 修改测试Controller，加入一个打印时间日期对象的方法，代码如下：
    @RequestMapping("/time")
    @ResponseBody
    public String json2() throws JsonProcessingException {

        ObjectMapper mapper = new ObjectMapper();
        //创建时间一个对象
        Date date = new Date();
        //将我们的对象解析成为json格式
        String str = mapper.writeValueAsString(date);

        return str; //由于@ResponseBody注解，这里会将str转成json格式返回；十分方便
    }

  1. 运行，结果如图：
    在这里插入图片描述
    默认日期格式会变成一个数字，是1970年1月1日到当前日期的毫秒数！Jackson 默认是转成时间戳（timestamps）形式
    为了解决这个问题，让时间按照指定的样式输出，需要取消timestamps形式，然后自定义时间格式

  2. 修改代码，代码如下：

    @RequestMapping("/time")
    @ResponseBody
    public String json2() throws JsonProcessingException {

        ObjectMapper mapper = new ObjectMapper();
        //不使用时间戳的方式
        mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS, false);
        //自定义日期格式对象
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        //指定日期格式
        mapper.setDateFormat(sdf);

        Date date = new Date();
        String str = mapper.writeValueAsString(date);

        return str; //由于@ResponseBody注解，这里会将str转成json格式返回；十分方便
    }

  1. 再次运行，结果如图：
    在这里插入图片描述

  2. 如果要经常使用该方法的相关代码的话，这样是比较麻烦的，可以将这些代码封装到一个工具类中，代码如下：

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.SerializationFeature;

import java.text.SimpleDateFormat;

public class JsonUtils {
    
    public static String getJson(Object object) {
        return getJson(object,"yyyy-MM-dd HH:mm:ss");
    }

    public static String getJson(Object object,String dateFormat) {
        ObjectMapper mapper = new ObjectMapper();
        //不使用时间差的方式
        mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS, false);
        //自定义日期格式对象
        SimpleDateFormat sdf = new SimpleDateFormat(dateFormat);
        //指定日期格式
        mapper.setDateFormat(sdf);
        try {
            return mapper.writeValueAsString(object);
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }
        return null;
    }
}
  1. 修改代码，使用工具类，代码如下：
   @RequestMapping("/utils")
    @ResponseBody
    public String json3() throws JsonProcessingException {

        Date date = new Date();
        String json = JsonUtils.getJson(date);

        return json;
    }

总结

总结：上面都是用的是 @ResponseBody 注解，它就是把后台的对象转换成json对象，返回到页面 ， 和它对应的当然就是@RequestBody，一般用来负责接收前台的json数据，把json数据自动封装到pojo中；之后可以用Ajax来测试这一块。这两个注解一般都会在异步获取数据中使用到；

前端领域里JSON在教育平台的应用
小白菜的博客
04-18 716
本文旨在全面解析JSON技术在现代教育平台前端开发中的关键作用和应用实践。JSON作为数据交换格式的优势教育平台特有的数据结构需求JSON在前端与后端交互中的最佳实践教育数据可视化的JSON实现方案文章首先介绍JSON的基础知识，然后深入探讨其在教育平台中的具体应用场景。我们将通过实际代码示例展示JSON数据处理的最佳实践，并分析性能优化策略。最后，我们将展望JSON在教育技术未来发展中的潜力。: 一种轻量级的数据交换格式，易于人阅读和编写，也易于机器解析和生成。
前端开发：巧用JSON实现数据可视化
最新发布
小白菜的博客
04-14 1224
本文旨在为前端开发者提供一套完整的JSON数据可视化解决方案。如何高效解析和处理JSON数据如何将JSON数据转换为可视化图表如何优化大数据量的JSON可视化性能如何实现动态JSON数据的实时可视化本文范围涵盖现代前端开发中常用的数据可视化技术，但不包括后端数据生成和存储相关内容。首先介绍JSON基础和数据可视化概念然后深入探讨核心算法和数据处理技术接着通过实际案例展示完整实现最后讨论高级应用和优化策略: 一种轻量级的数据交换格式，易于人阅读和编写，也易于机器解析和生成。
前端项目-json5.zip
09-02
前端项目-json5,ES5时代的JSON。
springboot-secruity.zip
01-30
Spring Security测试所需的文件，可用于spring security入门的学习测试，本文档来自于狂神说java系列课程秦疆老师的课堂测验所用，感谢秦疆老师java全栈开发的教导。本文件只用于测试无其他用途
Java 开源博客系统 spring mvc、 hibernate、 spring、 maven整合开发
08-01
Java 开源博客系统 spring mvc、 hibernate、 spring、 maven整合开发
java课程笔记(pdf版).zip
11-25
java课程笔记(pdf版).zip
【Spring】Spring概述和优点
渐若窥宏大的博客
11-19 2401
文章目录Spring概述Spring组成优点扩展参考资料 Spring基础，简单记录Spring5最新教程IDEA版【西部开源】 Spring概述 Spring：春天 ----> 给软件行业带来了春天！ Spring框架是由于软件开发的复杂性而创建的。Spring使用的是基本的JavaBean来完成以前只可能由EJB完成的事情。然而，Spring的用途不仅仅限于服务器端的开发。从简单性...
【前端学习笔记day89】10.17. json
汪雯琦的博客
01-31 483
文章目录10.17. jsonjson 10.17. json json json是 JavaScript Object Notation 的首字母缩写，单词的意思是javascript对象表示法，这里说的json指的是类似于javascript对象的一种数据格式，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式。 javascript自定义对象： var oMan = { n...
黑马程序员和尚硅谷前端Javascript学习笔记
m0_45020691的博客
11-26 1912
黑马程序员和尚硅谷前端Javascript学习笔记（持续更新中）
day03-前端(ajax&json).zip
10-07
在"day03-前端(ajax&json)"的学习中，你将有机会实践如何使用AJAX进行异步数据请求，以及如何处理和展示JSON数据。通过编写AJAX请求，你可以与服务器进行实时交互，例如动态加载数据、提交表单等。同时，了解如何...
CoderWhy-Web前端线上系统课学习笔记
qq_43362244的博客
04-24 4304
浏览器的本地存储主要分为Cookie和WebStorage和IndexDB,而WebStorage又可以分为LocalStorage和sessionStorage Cookie Cookie最开始的时候不是用来做本地存储的,而是为弥补HTTP在状态管理上的不足 HTTP协议是一个无状态协议,客户端向服务端发送请求,服务器返回响应,但是如何让服务端记住下次发送请求时客户端是谁?那么久产生了Cookie Cookie本质上是浏览器内部存储的一个很小的文本文件,内部是以键值对的方式在存储.在同一个域名发送
Day2 苍穹外卖前端 前端环境搭建、员工分页查询组件、启用禁用员工账号组件
2301_77358195的博客
12-24 904
本项目使用到的前端技术如下：node.jsvueElementUIaxiosvuexvue-routertypescript效果如下：主要代码在src目录中，src目录结构如下：下面重点介绍一下src中的重点文件和目录：App.vue：项目的主组件，，需要在终端通过命令进行安装。安装完成后，那为什么程序知道依赖哪些JS包？
初级码农Day-1
QZ_IT的博客
03-07 2789
成为码农的第一天，兴奋满满！感谢几位领导给予的机会与平台！希望以后能成为想象生活中的IT男！通过自己的努力，给老婆孩子带来具有一定物质基础的生活！[嘻嘻]此外感谢IT生活中的第一个启蒙老师——秦疆のJava世界，虽然不曾见过你，但是你的一堂网络视频课带领我走向了IT世界的第一步 ...
秦疆 西部开源_Java实现文件上传
weixin_39837139的博客
12-23 9584
JavaWeb实现文件的上传(整理自西部开源秦疆老师)1、准备工作对于文件上传，浏览器在上传的过程中是将文件以流的形式提交到服务器端的。一般采用Apache的开源工具common-fileupload这个文件上传组件。common-fileupload是依赖于common-io这个包的，所以还需要下载这个包。我们下载最新的jar包:common-fileupload :点击下载common-io...
包机制 java （来自秦疆老师的视频学习）
m0_52636693的博客
07-17 250
包机制 为了更好的组织类，java提供了包机制，用于区分类名的命名空间 package pkg1[ .pkg2 [ .pkg3…] ]; 一般 使用import来完成此功能 包的本质就是一个文件夹 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DT2kD2Y2-1626530808023)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210717185301864.png)]
狂神说day2：SpringBoot：运行原理探究
weixin_37615316的博客
02-12 1657
参考文档：https://www.cnblogs.com/hellokuangshen/p/11256189.html
SpringBoot：Web开发
weixin_30699741的博客
08-12 3130
狂神说 即使再小的帆也能远航 SpringBoot：Web开发 西部开源-秦疆老师：基于SpringBoot 2.1.6 的博客教程 ， 基于atguigu 1.5.x 视频优化 秦老师交流Q群号： 664386224 未授权禁止转载！编辑不易 ， 转发请注明出处！防君子不防小人，共勉！ 简介 好的，同学们，那么接下来呢，我们开始学习Spri...
【狂神说：秦疆】Git学习笔记（入门）
qq_48575500的博客
06-28 1153
Git Git集成idea
深入理解JavaScript之Day10学习笔记
通常，这种类型的课程会从基础的变量和数据类型开始，逐步过渡到条件语句、循环、函数定义，然后再深入到面向对象编程、事件驱动编程、以及更复杂的主题，比如JSON数据处理、Ajax网络请求、前端框架（如React、Vue....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

赈川

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值