SpringMVC：Ajax和Json

时间  2019-11-29
标签 springmvc ajax json 栏目 Spring 繁體版
原文   原文链接

SpringMVC：Ajax和Json

1. 什么是Json

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

先后端分离，数据交互异常重要，json才是王者。css

1.1 json的语法要求

  1. 任何JS支持的类型均可以经过 JSON 来表示，例如字符串、数字、对象、数组等。要求和语法格式以下：html

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

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

    {"name": "钢铁侠"}
{"age": "48"}
{"sex": "男"}
{"role","hero"}

  3. json本质上是一个字符串，它使用文本表示一个JS对象的信息；总的来讲，json本质是一个表示js对象的字符串。java

1.2 JSON和JS之间的转换

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

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

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

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

  3. 代码实现二者转换：ajax

    <head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    //编写一个对象
    var user = {
        name:"啊侠",
        age:20,
        sex:"男"
    };
    //输出一下这个对象
    console.log(user);
    //将js对象转换为json字符串；
    var str = JSON.stringify(user);
    console.log(str)
    var obj =  JSON.parse(str);
    console.log(obj);
</script>
</body>
</html>

1.3 使用Controller实现返回JSON数据

  1. json解析工具中有一个最受欢迎的就是jackson，要使用Jackson，就须要使用它的jar包：在maven的pom.xml文件中的dependencies标签中输入如下代码自动导入相关jar包：spring

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

  2. 编写user类并根据其编写controller数据库

    1. user类：

      package com.david.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 + '\'' +
                '}';
    }
}

    2. controller：（这部份内容咱们顺便展现有关时间的处理方法）

      package com.david.controller;

import com.david.pojo.User;
import com.david.utils.Util;
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.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

@Controller
public class UserController {
    //有关user的controller实现
    @RequestMapping(value = "/json1",produces = "application/json;charset=utf-8")//乱码问题：给@RequestMapping加一个属性
    @ResponseBody
    //@ResponseBody做用：该注解用于将Controller的方法返回的对象，经过适当的HttpMessageConverter转换为指定格式后，写入到Response对象的body数据区。
    public String json1() throws JsonProcessingException {
    //User user = new User("李",1,"man");
    //ObjectMapper mapper = new ObjectMapper();
    //String s = mapper.writeValueAsString(user);将Java对象转换为json字符串；
    //return s;
        //以上代码简化以下
        return new ObjectMapper().writeValueAsString(new User("爱心觉罗侠",21,"男"));
    }

    @RequestMapping(value = "/json2")
    @ResponseBody
    public String json2() throws JsonProcessingException {
        List<User> list = new ArrayList<>();
        User user1 = new User("啊侠",20,"男");
        User user2 = new User("啊豪",21,"男");
        User user3 = new User("啊美",18,"女");
        User user4 = new User("啊萌",19,"女");
        list.add(user1);
        list.add(user2);
        list.add(user3);
        list.add(user4);
        return new ObjectMapper().writeValueAsString(list);
    }

    //咱们建立一个时间日期的对象试试，看看能不能转换成功
    //有关时间的controller实现
    //发现问题：时间默认返回的json字符串变成了时间戳的格式
    //为了避免让时间显示时间戳形式，咱们进行如下操做
    @RequestMapping(value = "/time")
    @ResponseBody
    public String time() throws JsonProcessingException {
        ObjectMapper om = new ObjectMapper();
        //1.因此咱们要关闭它的时间戳功能
        om.configure (SerializationFeature.WRITE_DATES_AS_TIMESTAMPS,false);
        //2.自定日期格式对象；
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        //3.让mapper指定时间日期格式为simpleDateFormat；
        om.setDateFormat(sdf);
        //建立日期对象
        Date date = new Date();
        String str = om.writeValueAsString(date);
        return str;//因为@ResponseBody注解，这里会将str转成json格式返回；十分方便
    }

    //因为发现再次进行相似处理时候可使用一样的代码，
    //因而处于java的精髓为此段代码编写工具类，将其封装起来

    //创建util类之后调用util类方法来实现时间在网页的显示
    @RequestMapping(value = "/time2")
    @ResponseBody
    public String time2() {
        return Util.getJson(new Date());
    }
}

    3. 有关时间的内容的util类：

      package com.david.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 Util {
    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 simpleDateFormat = new SimpleDateFormat(dateFormat);
        mapper.setDateFormat(simpleDateFormat);
        try {
            return mapper.writeValueAsString(object);
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }
        return null;
    }
}

编写完这三个类，配置好tomcat咱们就能够在网页中简单测试了。

上面处理问题的过程当中咱们都在尽可能的体现封装的思想，因此这里介绍一种一劳永逸的json处理乱码的方法：能够经过Spring配置统一指定，这样就不用每次都去处理了！

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

至此，咱们简单了解了如何将json转换为js，也了解了一些将时间戳转换为时间格式的方法，顺便回顾了封装的思想。

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

2. Ajax

2.1 AJAX简单介绍

  1. AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
  2. AJAX 是一种在无需从新加载整个网页的状况下，可以更新部分网页的技术。在之前的网页中还有如今少部分网站会出现，登陆若是失败，须要刷新才能登陆；或者不点击刷新就不知道本身的信息是否正确（web1.0时代）。而如今大多数网站都是局部刷新，不更新网页的状况下，实现局部信息更新（即为web2.0时代）。
  3. 必定要注意：Ajax 不是一种新的编程语言，而是一种用于建立更好更快以及交互性更强的Web应用程序的技术。
  4. 利用AJAX能够作：
    1. 注册时，输入用户名自动检测用户是否已经存在。
    2. 登录时，提示用户名密码错误
    3. 删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除。

2.2 利用前端的一个标签来伪造ajax:(iframe标签)

创建HTML文件并进行如下代码操做：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>david</title>
</head>
<body>
<script type="text/javascript">
    window.onload = function(){
        var myDate = new Date();
        document.getElementById('currentTime').innerText = myDate.getTime();
    };

    function LoadPage(){
        var targetUrl =  document.getElementById('url').value;
        console.log(targetUrl);
        document.getElementById("iframePosition").src = targetUrl;
    }
</script>
<div>
    <p>请输入要加载的地址：（格式要正确，如：https://www.baidu.com/或https://www.sogou.com/）</p>
    <p>为方便观察，当前时间戳为：<span id="currentTime"></span></p>
    <p>
        <input id="url" type="text" value=""/>
        <input type="button" value="提交" onclick="LoadPage()">
    </p>
</div>
<div>
    <h3>加载页面位置：</h3>
    <iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe>
</div>
</body>
</html>

2.3jQuery.Ajax

  1. Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。可以以异步方式从服务器获取新数据。

  2. 为了不重复的代码，咱们直接学习jQuery提供的Ajax；jQuery 提供多个与 AJAX 有关的方法。经过 jQuery AJAX 方法，就可以使用HTTP Get和HTTP Post从远程服务器上请求文本、HTML、XML或 JSON–同时您可以把这些外部数据直接载入网页的被选元素中。

  3. 咱们来简单看一下这些让人方便却又让刚接触的人头痛的方法：

    1. jQuery.get(...)

      参数：
      url: 待载入页面的URL地址
      data: 待发送 Key/value 参数。
      success: 载入成功时回调函数。
      dataType: 返回内容格式，xml, json, script, text, html

    2. jQuery.post(...)

      全部参数：
      url: 待载入页面的URL地址
      data: 待发送 Key/value 参数
      success: 载入成功时回调函数
      dataType: 返回内容格式，xml, json, script, text, html

    3. jQuery.getScript(...)

      全部参数：
      url: 待载入页面的URL地址
      data: 待发送 Key/value 参数。
      success: 载入成功时回调函数。

    4. jQuery.getJSON(...)

      全部参数：
      url: 待载入页面的URL地址
      data: 待发送 Key/value 参数。
      success: 载入成功时回调函数。

    5. jQuery.ajax(...)

      部分参数：

      url：请求地址
      type：请求方式，GET、POST（1.9.0以后用method）
      headers：请求头
      data：要发送的数据
      contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
      async：是否异步
      timeout：设置请求超时时间（毫秒）
      beforeSend：发送请求前执行的函数(全局)
      complete：完成以后执行的回调函数(全局)
      success：成功以后执行的回调函数(全局)
      error：失败以后执行的回调函数(全局)
      accepts：经过请求头发送给服务器，告诉服务器当前客户端课接受的数据类型
      dataType：将服务器端返回的数据转换成指定类型
      "xml": 将服务器端返回的内容转换成xml格式
      "text": 将服务器端返回的内容转换成普通文本格式
      "html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，若是包含JavaScript标签，则会尝试去执行。

      "script": 尝试将返回值看成JavaScript去执行，而后再将服务器端返回的内容转换成普通文本格式

      "json": 将服务器端返回的内容转换成相应的JavaScript对象
      "jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数

使用ajax实现注册提示

  1. 编写controller：

    @RequestMapping("/a")
    @ResponseBody
    public String ajax(String name,String pwd){
        String msg = "";
        //模拟数据库中存在数据
        if (name!=null){
            if ("admin".equals(name)){
                msg = "OK";
            }else {
                msg = "用户名输入错误";
            }
        }
        if (pwd!=null){
            if ("123456".equals(pwd)){
                msg = "OK";
            }else {
                msg = "密码输入有误";
            }
        }
        return msg; //因为@ResponseBody注解，将list转成json格式返回
    }

  2. 编写前端页面，进行异步处理：

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.4.1.min.js"></script>
    <script>

        function a1(){
            $.post({
                url:"${pageContext.request.contextPath}/ajax/a3",
                data:{'name':$("#name").val()},
                success:function (data) {
                    if (data.toString()=='OK'){
                        //学习连接：https://www.w3school.com.cn/jquery/css_css.asp
                        $("#userInfo").css("color","green");
                    }else {
                        $("#userInfo").css("color","red");
                    }
                    $("#userInfo").html(data);
                }
            });
        }
        function a2(){
            $.post({
                url:"${pageContext.request.contextPath}/ajax/a3",
                data:{'pwd':$("#pwd").val()},
                success:function (data) {
                    if (data.toString()=='OK'){
                        $("#pwdInfo").css("color","green");
                    }else {
                        $("#pwdInfo").css("color","red");
                    }
                    $("#pwdInfo").html(data);
                }
            });
        }

    </script>
</head>
<body>
<p>
    用户名:<input type="text" id="name" onblur="a1()"/>
    <span id="userInfo"></span>
</p>
<p>
    密码:<input type="text" id="pwd" onblur="a2()"/>
    <span id="pwdInfo"></span>
</p>
</body>
</html>

以上代码便可实现动态请求响应，局部刷新的效果。

乱谈阿贾克斯（纯属娱乐）

  1. 咱们介绍的是编程过程当中的Ajax，不要到百度上胡乱搜索！AJAX 是一种在无需从新加载整个网页的状况下，可以更新部分网页的技术。
  2. 若是去网页上直接搜索阿贾克斯，会出现好多不是这个层面的知识，以下：
    1. 地理知识：
    2. 神话知识：
    3. 电影知识：
    4. 体育知识： 不管是什么方面的知识，多知道一些老是没错的。其实随意搜索是会出现不少生活彩蛋的。
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程