本文共 6757 字，大约阅读时间需要 22 分钟。

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的使用，代码如下：

2. 运行效果如下（在网页编辑器中查看）：
   

使用Controller实现返回JSON数据

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

返回对象

1. 这里使用Jackson，使用它需要导入它的jar包；

           
               
    
     com.fasterxml.jackson.core
                
    
     jackson-databind
                
    
     2.9.8
            
   

2. 编写一个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 + '\'' +                '}';    }}

3. 然后去编写我们的测试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;@Controllerpublic 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格式返回；十分方便    }}

4. 配置tomcat，测试，发现出现乱码问题，如图所示：
   
5. 为了解决乱码问题，需要设置一下它的编码格式为utf-8，以及它返回的类型，通过@RequestMaping的produces属性来实现，如图所示：

//produces:指定响应体返回类型和编码    @RequestMapping(value = "/json",produces = "application/json;charset=utf-8")

6. 再次测试，发现乱码问题消除，如图所示：
   

注意：使用json记得处理乱码问题！

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

7. 在resources目录下新建spring-servlet.xml配置文件，代码如下：

返回集合

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
   
     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格式返回；十分方便    }
   

2. 运行，结果如图：
   

返回日期

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格式返回；十分方便    }

2. 运行，结果如图：

   
   默认日期格式会变成一个数字，是1970年1月1日到当前日期的毫秒数！Jackson 默认是转成时间戳（timestamps）形式
   为了解决这个问题，让时间按照指定的样式输出，需要取消timestamps形式，然后自定义时间格式

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

@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格式返回；十分方便    }

4. 再次运行，结果如图：

   

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

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;    }}

6. 修改代码，使用工具类，代码如下：

@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来测试这一块。这两个注解一般都会在异步获取数据中使用到；

转载地址：http://gscen.baihongyu.com/