Ajax

1. JSON

JSON 最早是 JavaScript 對象的表示形式，現在主要用於互聯網傳輸數據載體。
JSON 比 XML 更小、更快，更易解析。

a. 配置 JSON 與 Java 的轉換器

i. 常見的解析器

工具名稱	介紹
Jsonlib	Java 類庫，需要導入的 Jar 包較多
Gson	Google 提供的一個簡單的 Json 轉換工具
Fastjson	Alibaba 技術團隊提供的一個高性能的 Json 轉換工具
Jackson	開源免費的 Json 轉換工具，SpringMVC 轉換默認使用 Jackson

ii. 使用 Jackson，導入 Jar 包

相關 Jar 包已上傳至 CSDN：Json 相關 Jar 包。

b. 將 Java 對象轉爲 Json（字符串）

關鍵方法：String writeValueAsString(Object object);

i. 實體類

package com.company;

public class User {

    private String id;
    private String name;
    private String sex;
    private Integer age;
    private String address;
    private String qq;
    private String email;

    public User() {
    }

    public User(String id, String name, String sex, Integer age, String address, String qq, String email) {
        this.id = id;
        this.name = name;
        this.sex = sex;
        this.age = age;
        this.address = address;
        this.qq = qq;
        this.email = email;
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }

    public String getQq() {
        return qq;
    }

    public void setQq(String qq) {
        this.qq = qq;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", sex='" + sex + '\'' +
                ", age=" + age +
                ", address='" + address + '\'' +
                ", qq='" + qq + '\'' +
                ", email='" + email + '\'' +
                '}';
    }
}

ii. 轉換實體類

	// 1.將User對象轉爲Json字符串
    @Test
    public void UserToJson() throws Exception {
        User user = new User("1", "Regino", "男", 23, "HK", "123", "[email protected]");

        // 創建Jackson轉換器對象
        ObjectMapper om = new ObjectMapper();

        // 將任意對象轉爲Json字符串
        String json = om.writeValueAsString(user);
        System.out.println(json); // 在Java中name必須使用雙引號包裹起來
    }

iii. 轉換 Map

    // 2.將map集合轉爲Json字符串
    @Test
    public void MapToJson() throws Exception {
        Map<String, Object> map = new HashMap<>();
        map.put("name", "Regino");
        map.put("age", 21);

        // 創建Jackson轉換器對象
        ObjectMapper om = new ObjectMapper();

        // toJson
        String json = om.writeValueAsString(map);
        System.out.println(json); //  {"name":"張三","age":18}
    }

iv. 轉換 List

    // 3.將list集合轉爲Json數組字符串
    @Test
    public void ListToJson() throws Exception {
        List<User> list = new ArrayList<>();
        list.add(new User("1", "Reggie", "男", 23, "HK", "123", "[email protected]"));
        list.add(new User("2", "Regina", "女", 21, "HK", "123", "[email protected]"));

        // 創建Jackson轉換器對象
        ObjectMapper om = new ObjectMapper();

        // toJson
        String json = om.writeValueAsString(list);
        System.out.println(json); // [{},{}]
    }

c. 將 Json（字符串）轉爲 Java 對象

關鍵方法：T readValue(String json,Class<T> classType);

i. 轉換爲實體類

    // 1.將Json字符串轉爲User對象
    @Test
    public void JsonToUser() throws Exception {
        String json = "{\"id\":\"1\",\"name\":\"Regino\",\"sex\":\"男\",\"age\":23,\"address\":\"HK\",\"qq\":\"123\",\"email\":\"[email protected]\"}";

        // 創建jackson轉換器對象
        ObjectMapper om = new ObjectMapper();

        // toUser
        User user = om.readValue(json, User.class);
        System.out.println(user);
    }

ii. 轉換爲 Map

    // 2.將Json字符串轉爲map集合（如果你獲取的Json格式沒有對應的Java實體對象，就可以拿map接收）
    @Test
    public void JsonToMap() throws Exception {
        String json = "{\"name\":\"Regino\",\"age\":23}";

        // 創建Jackson轉換器對象
        ObjectMapper om = new ObjectMapper();

        // toMap
        Map<String, Object> map = om.readValue(json, Map.class);
        System.out.println(map);
    }

iii. 轉換爲 List

    // 3.將Json數組字符串轉爲list集合
    @Test
    public void JsonToList() throws Exception {
        String json = "[{\"id\":\"1\",\"name\":\"Reggie\",\"sex\":\"男\",\"age\":23,\"address\":\"HK\",\"qq\":\"123\",\"email\":\"[email protected]\"},{\"id\":\"2\",\"name\":\"Regina\",\"sex\":\"女\",\"age\":21,\"address\":\"HK\",\"qq\":\"123\",\"email\":\"[email protected]\"}]";

        // 創建Jackson轉換器對象
        ObjectMapper om = new ObjectMapper();

        // toList
        List list = om.readValue(json, List.class);
        System.out.println(list);
    }

2. Ajax 案例：檢查用戶名是否可用

a. 主要需求

在用戶註冊頁面，輸入用戶名，當用戶名輸入框失去焦點時，發送異步請求，將輸入框的用戶名傳遞給服務器進行是否存在的校驗。

b. 技術要求

此需求使用了 Ajax 技術：通過 異步提交，實現頁面的 局部刷新，提高用戶的體驗。

c. JQuery 提供的 Ajax 函數

Ajax：

		$.ajax({
            type:"請求方式，get|post",
            url:"請求服務器地址",
            data:"請求參數",
            success:function(resp){
                resp就是服務器返回的結果...
            }
		});

get：

		$.get(url(地址?參數),function(resp){
            
		});

post：

		$.post(url,data,function(resp){
            
		})

d. 需求分析

e. 代碼實現

i. index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>${NAME}</title>
  <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.js"></script>
</head>
<body>
<h3>用戶註冊</h3>
<form action="#" method="post">
  用戶名：<input type="text" name="username" id="username"><span id="userwarn"></span><br>
</form>

<script>
  // 給用戶文本框綁定失去焦點事件
  $('#username').blur(function () {
    // 獲取用戶輸入的值
    console.log(this.value);
    let data = "username=" + this.value;
    // 發送Ajax請求
    $.ajax({
      type:"post",
      url:'${pageContext.request.contextPath}/CheckServlet',
      data:data,
      success:function (resp) {
        console.log(resp);
        // 判斷結果並實現局部刷新
        if(resp.flag){
          $('#userwarn').text(resp.msg).css('color','green');
        }else{
          $('#userwarn').text(resp.msg).css('color','red');
        }
      }
    })
  })
</script>
</body>
</html>

需要導入 JQuery 的 Jar 包，相關資源已上傳至 CSDN：JQuery 類庫。

ii. CheckServlet

package com.company;

import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

@WebServlet("/CheckServlet")
public class CheckServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        // 1.接收請求參數
        String username = request.getParameter("username");

        // 2.聲明map集合
        Map<String, Object> map = new HashMap<>();

        // 3.判斷用戶是否存在
        if (username.equals("Regino")) {
            map.put("flag", false);
            map.put("msg", "× 此用戶已註冊");
        } else {
            map.put("flag", true);
            map.put("msg", "√ 此用戶可以註冊");
        }

        // 4.將map集合轉爲Json字符串
        ObjectMapper om = new ObjectMapper();
        String json = om.writeValueAsString(map);
        System.out.println(json);

        // 5.設置Json的MIME類型
        response.setContentType("application/json;charset=utf-8");

        // 6.Response響應Json到客戶端
        response.getWriter().write(json);
    }
}

f. 測試

訪問主頁 http://localhost:8080/webappPractice2/，頁面顯示：

原文鏈接：https://qwert.blog.csdn.net/article/details/105780425

Ajax 在 Web 中的應用

目錄

Ajax

1. JSON

a. 配置 JSON 與 Java 的轉換器

i. 常見的解析器

ii. 使用 Jackson，導入 Jar 包

b. 將 Java 對象轉爲 Json（字符串）

i. 實體類

ii. 轉換實體類

iii. 轉換 Map

iv. 轉換 List

c. 將 Json（字符串）轉爲 Java 對象

i. 轉換爲實體類

ii. 轉換爲 Map

iii. 轉換爲 List

2. Ajax 案例：檢查用戶名是否可用

a. 主要需求

b. 技術要求

c. JQuery 提供的 Ajax 函數

d. 需求分析

e. 代碼實現

i. index.jsp

ii. CheckServlet

f. 測試

JavaScript 全集

Nginx 概述與應用

Linux 簡述與基礎命令

Linux 軟件安裝與項目部署

Ajax 發送數據到 Servlet

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結