SpringMVC(六) | 前后端交互之ajax与json

json

1 json介绍

• JSON：JavaScript 对象表示法（JavaScript Object Notation）。
• JSON 是存储和交换文本信息的语法。类似 XML。
• JSON 比 XML 更小、更快，更易解析。

2 json语法

JSON 语法是 JavaScript 语法的子集

json的语法格式

• 数据键值对形式表示
• 对象用大括号
• 数组用中括号

对象格式：

{name: "Alicy", age: 12, adr: "china"}

json格式：

{"name":"Alicy","age":12,"adr":"china"} //对象格式的json
// 数组格式的json
[{"name":"Alicy","age":12,"adr":"china"},
 {"name":"Alicy","age":12,"adr":"china"},
 {"name":"Alicy","age":12,"adr":"china"}]

3JSON使用

3.1JSON和对象前端中互转

• 将对象和对象数组转换为JSON格式

  var person = {
          name: "Alicy",
          age: 12,
          adr: "china"
      };
  var listperson = [person,person,persion];
  
  var json1 = JSON.stringify(person)         //对象转json
  var listjson = JSON.stringify(listperson); //数组转json
  

• 将JSON格式转换为对象

  var person1 = JSON.parse(json1);           //json转对象
  var listperson2 = JSON.parse(listjson);	   //json转数组
  

3.2 JSON和对象Java中互转。

1. 导入jar包

   使用第三方的Jackson来进行json解析工作

   <dependency>
       <groupId>com.fasterxml.jackson.core</groupId>
       <artifactId>jackson-databind</artifactId>
       <version>2.11.4</version>
   </dependency>
   

2. 新建ObjectMapper对象，使用**writeValueAsString()或readValue()**方法

   对象或数组转json

   @RequestMapping("/json")
   @ResponseBody
   public String myjson() throws JsonProcessingException {
       ObjectMapper mapper = new ObjectMapper();
       String message = mapper.writeValueAsString(bookService.queryAllBook());//什么格式的都可以这样转
       return message;
   }
   

   json转对象或数组

   @RequestMapping("/json")
   @ResponseBody
   public String myjson() throws JsonProcessingException {
       ObjectMapper mapper = new ObjectMapper();
       String message = mapper.writeValueAsString(bookService.queryAllBook());
       //对象格式
       //Books book = mapper.readValuer(message,Book.class);
       //数组格式
       List<Book> bookList = mapper.readValue(message,new TypeReference<List<Book>>(){}); 
       System.out.println(bookList);
       return "ok";
   }
   

4 解决JSON乱码问题

在springmvc配置文件中增加StringHttpMessageConverter转换配置。

这个配置是从springmvc注解层次来解决字符串的转换问题。

<!-- 1.开启SpringMVC注解驱动 -->
<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>

可以看出，这个方法只适用于jackson。

5 JSON之Date

将一个普通的Date对象转换成json格式，是一个时间戳

@RequestMapping("/json1")
@ResponseBody
public String myjson1() throws JsonProcessingException {
    Date date = new Date();
    return objectMapper.writeValueAsString(date);
}

输出：1621062974693

Jackson 默认是会把时间转成timestamps形式（时间戳）

我们可以清除json的默认格式，为它加上我们自定义的规则转换。

@RequestMapping("/json1")
@ResponseBody
public String myjson1() throws JsonProcessingException {
    Date date = new Date();
    //取消默认格式
    objectMapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS, false);
    SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
    //配置到object的配置中去。
    objectMapper.setDateFormat(si mpleDateFormat);
    return objectMapper.writeValueAsString(date);
}

输出：“2021-05-15 15:23:40”

5.1 优化为工具类

如果我们对时间格式的转换频繁，那么频繁的写SimpleDateFormat将会增加代码的冗余。我们将这个功能抽取出来，使它达到能将传入的Date转化为指定的格式或者默认的格式。

@Component
public class JsonDateUtil {

    private static ObjectMapper objectMapper;

    @Autowired
    @Qualifier("objectMapper")
    public void setObjectMapper(ObjectMapper objectMapper) {
        JsonDateUtil.objectMapper = objectMapper;
    }

    public static String getDateJson(Object object) throws JsonProcessingException {
        return getDateJson(object, "yyyy-MM-dd HH-mm-ss");
    }

    public static String getDateJson(Object object,String simpleDateFormat) throws JsonProcessingException {
        objectMapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS,false);
        SimpleDateFormat simpleDateFormat1 = new SimpleDateFormat(simpleDateFormat);
        objectMapper.setDateFormat(simpleDateFormat1);
        return objectMapper.writeValueAsString(object);
    }

}

测试：

@RequestMapping("/json2")
@ResponseBody
public String myjson2() throws JsonProcessingException {
    Date date = new Date();
    return JsonDateUtil.getDateJson(date);
}

@RequestMapping("/json3")
@ResponseBody
public String myjson3() throws JsonProcessingException {
    Date date = new Date();
    return JsonDateUtil.getDateJson(date,"yyyy-MM-dd");
}

5.2 关于spring注入静态属性问题

静态属性在类的创建初就已经初始化分配内存了，所以不支持在属性名上直接注入值。需要在它的set方法上注入，而且要把set方法的static属性给手动删除。

在写这个工具类的时候，因为比较粗心，包扫描和组件注解都没有添加。

6 FastJson

fastjson.jar是阿里开发的一款专门用于Java开发的包，功能和jackjson类似。

6.1 使用方式

• 对象和数组转化为json格式

  @RequestMapping("/fastjson")
  @ResponseBody
  public String fastJson() throws JsonProcessingException {
      List<Book> bookList= bookService.queryAllBook();
      Book book = bookService.queryBookById(3);
      //对象转化为json格式
      //String bookjson = JSON.toJSONString(book);
      //数组转化为字符串格式
      String booklistjson = JSON.toJSONString(bookList);
      return booklistjson;
  }
  

• json格式转化为对象或者数组。

  @RequestMapping("/fastjson2")
  @ResponseBody
  public String fastJson2() throws JsonProcessingException {
      List<Book> bookList= bookService.queryAllBook();
      Book book = bookService.queryBookById(3);
      String bookjson = JSON.toJSONString(book);
      String booklistjson = JSON.toJSONString(bookList);
      //对象转化为json格式
      //Book book2 = JSON.parseObject(bookjson,Book.class);
      //数组转化为字符串格式
      List<Book> bookList1 = JSON.parseArray(booklistjson,Book.class);
      return booklistjson;
  }
  

  本来想着使用提供parse()来操作一下的，结果对象和数组的转换都不行。

  fastjson比jackson的方法更简单，名称和前端的方法名称也类似。特别是在关于json数组转化为数组对象的时候，比jsckson方便很多

6.2 FastJson之Date

@RequestMapping("/fastjson3")
@ResponseBody
public String fastJson3() throws JsonProcessingException {
    Date date = new Date();
    JSON.DEFFAULT_DATE_FORMAT="yyyy-MM-dd";//设置日期格式
    return JSON.toJSONString(date, SerializerFeature.WriteDateUseDateFormat);
}

ajax

• AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

• AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

我们并没有去刷新页面，url地址也没有发生变化，但是网页却刷新了内容。这就是通过ajax异步更新数据。
ajax的使用可以查看一遍学会ajax