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