背景

Web 1.0 时代

早期网站，登录，如果失败，需要刷新页面，才能重新登录；不点击提交按钮，就不知道自己密码输错了

现在大多数的网站，都是局部刷新，不刷新整个页面的情况下，实现页面更新

注册的时候，发现手机号已经注册过了，但是你只是输入了，没有提交，然后他就提示了手机号已存在

Web 2.0 时代

最重要的一个因素就是Ajax

JSON

JSON是一种轻量级的数据交换格式，目前使用极其广泛

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

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

1
2
3

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

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

1 2	var obj = {a:'hello',b:'world'}; //这是一个对象 var json = '{a:'hello',b:'world'}'; //这是JSON字符串

JSON和JS互转

实现JSON转JS对象，使用JSON.parse()方法

1	var obj = JSON.parse('{a:'hello',b:'world'}') ;

运行结果

1	{a:'hello',b:'world'}

实现JS对象转JSON，使用JSON。stringify()方法

1	var json = JSON.stringify({a:'hello',b:'world'});

JSON1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script type="text/javascript">
        //编写一个对象
        var user = {
            name:"s1nd0re1",
            age:21,
            sex:"男"
        };
        //输出这个对象
        console.log(user);
        //将js对象转换成json对象
        var json = JSON.stringify(user);
        //输出这个json字符串
        console.log(json);

        var obj = JSON.parse(json);

        console.log(obj)
</script>

</body>
</html>

演示

创建一个web application项目
创建springmvc的配置文件

<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:aop="http://www.springframework.org/schema/aop"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xmlns:p="http://www.springframework.org/schema/p" xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/context
                    http://www.springframework.org/schema/context/spring-context.xsd
                    http://www.springframework.org/schema/beans
                    http://www.springframework.org/schema/beans/spring-beans.xsd
                    http://www.springframework.org/schema/tx
                    http://www.springframework.org/schema/tx/spring-tx.xsd
                    http://www.springframework.org/schema/aop
                    http://www.springframework.org/schema/aop/spring-aop.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <context:component-scan base-package="com.ceit.controller" />
    <mvc:default-servlet-handler />
    <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>

创建User实体类

package com.ceit.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;

@Data
@Accessors(chain = true)
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private String name;
    private int age;
    private String sex;
}

编写控制器 UserController

package com.ceit.controller;

import com.ceit.pojo.User;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class UserController {
    @RequestMapping("/json1")
    //我们正常返回会走视图解析器，而jso返回的是一个字符串
    //市面上有很多的第三方jar包可以实现这个功能，jackson  只需要一个简单的注解就可以实现了
    @ResponseBody  //将服务器端返回的对象转换为json对象响应回去
    public String json1() throws JsonProcessingException {
        //需要一个jackson的对象映射器，就是一个类，使用它可以直接将对象转换为json字符串
        ObjectMapper objectMapper = new ObjectMapper();
        // 创建一个对象
        User user = new User("51nd0re1",21,"男");
        System.out.println(user);
        //将Java对象转换为json字符串
        String str = objectMapper.writeValueAsString(user);
        System.out.println(str);

        return str; //由于使用了@ResponseBody  这里会将str以json格式的字符串返回，十分方便
    }
}

访问/json1就可以了但是由于编码问题前端会出现乱码
可以在@RequestMapping添加produces

最方便的就是修改配置文件

<mvc:annotation-driven>
    <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>

就可以修改成默认utf-8

UserController.java

package com.ceit.controller;

import com.ceit.pojo.User;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class UserController {
    @RequestMapping(value = "/json2")
    @ResponseBody
    public String json2() throws JsonProcessingException {
        User user = new User("51nd0re1", 21, "男");
        return new ObjectMapper().writeValueAsString(user);
    }

}

运行结果

1	{"name":"51nd0re1","age":21,"sex":"男"}

还可以用来显示时间返回的是时间戳的格式:1615286246602

package com.ceit.controller;

import com.ceit.pojo.User;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.Date;

@Controller
public class UserController {
    @RequestMapping(value = "/time1")
    @ResponseBody
    public String json3() throws JsonProcessingException {
        Date date = new Date();
        return new ObjectMapper().writeValueAsString(date);
    }

}

这样显示时间很不方便

package com.ceit.controller;

import com.ceit.pojo.User;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.SerializationFeature;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;

@Controller
public class UserController {
    @RequestMapping(value = "/time2")
    @ResponseBody
    public String json5() throws JsonProcessingException {
        ObjectMapper mapper = new ObjectMapper();

        //1.如何让他不返回时间戳:关闭时间戳功能
        mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS,false);
        //2.时间格式化问题
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        //3.让mapper指定时间日期格式为simpleDateFormat
        mapper.setDateFormat(simpleDateFormat);
        //4.写一个日期对象
        Date date = new Date();
        return mapper.writeValueAsString(date);

    }

}

运行结果

1	"2021-03-09 18:45:10"

封装成工具类

发现问题，重复代码太多，给它编写一个工具类JsonUtils

package com.ceit.utils;

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();
        //1.如何让他不返回时间戳:关闭时间戳功能
        mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS,false);
        //2.时间格式化问题
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat(dateFormat);
        //3.让mapper指定时间日期格式为simpleDateFormat
        mapper.setDateFormat(simpleDateFormat);

        try {
            return mapper.writeValueAsString(object);
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }
        return null;
    }
}

再修改Controller

package com.ceit.controller;

import com.ceit.pojo.User;
import com.ceit.utils.JsonUtils;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.SerializationFeature;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;

@Controller
public class UserController {
    @RequestMapping(value = "/time3")
    @ResponseBody
    public String json6() throws JsonProcessingException {

        Date date = new Date();
        return JsonUtils.getJson(date);

    }

}

这样代码就非常简洁美观了
运行结果

1	"2021-03-09 18:55:37"

源码下载