day35-JSON&Ajax03

来源:https://www.cnblogs.com/liyuelian/archive/2022/12/09/16969698.html
-Advertisement-
Play Games

JSON&Ajax03 4.jQuery的Ajax請求 原生Ajax請求問題分析： 編寫原生的Ajax要寫很多的代碼，還要考慮瀏覽器相容問題，使用不方便 在實際工作中，一般使用JavaScript的框架（比如jquery）發動Ajax請求，從而解決這個問題。 4.1jQuery Ajax操作方法 在 ...


JSON&Ajax03

4.jQuery的Ajax請求

原生Ajax請求問題分析：

  1. 編寫原生的Ajax要寫很多的代碼，還要考慮瀏覽器相容問題，使用不方便
  2. 在實際工作中，一般使用JavaScript的框架（比如jquery）發動Ajax請求，從而解決這個問題。

4.1jQuery Ajax操作方法

線上文檔：jQuery 參考手冊 - Ajax (w3school.com.cn)

4.2$.ajax()方法

完整的參數查看手冊：jQuery ajax - ajax() 方法

$.ajax 常用參數：

  • url：請求的地址

  • type：請求的方式get或者post， 預設為 "GET"。

    註意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可以使用，但僅部分瀏覽器支持。

  • data：發送到伺服器的數據，將自動轉換為請求字元串格式

  • success：請求成功後的回調函數

    參數：由伺服器返回，並根據 dataType 參數進行處理後的數據；描述狀態的字元串。

    這是一個 Ajax 事件。

  • error：預設值: 自動判斷 (xml 或 html)，請求失敗時的回調函數。

  • dataType：指定返回的數據類型，常用json或text

4.3$.get()和$.post()請求

jQuery AJAX get() 和 post() 方法

$.get()請求和$.post()請求常用參數：

  • url：請求的url地址
  • data：請求發送到伺服器的數據
  • success：成功時的回調函數
  • type：返回內容的格式，xml，html，script，json，text

說明：$.get() 和 $.post() 底層還是使用$.ajax()方法來實現非同步請求

4.3.1$.get()

get() 方法通過遠程 HTTP GET 請求載入信息

這是一個簡單的 GET 請求功能以取代複雜 $.ajax，請求成功時可調用回調函數。如果需要在出錯時執行函數，請使用 $.ajax().

語法：

$(selector).get(url,data,success(response,status,xhr),dataType)
image-20221208230946420

4.3.2$.post()

post() 方法通過 HTTP POST 請求從伺服器載入數據。

語法：

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

4.4$.getJSON()方法

jQuery ajax - getJSON() 方法

$.getJSON()常用參數

  • url：請求發送哪個url
  • data：請求發送到伺服器的數據
  • success：請求成功時運行的函數

說明：$.getJSON()底層使用$.ajax()方法來實現非同步請求

$.getJSON()方法通過 HTTP GET 請求載入 JSON 數據，語法：

jQuery.getJSON(url,data,success(data,status,xhr))
image-20221208232056072

4.5應用實例

4.5.1$.ajax()應用實例

演示jquery發送ajax的案例

  1. 在輸入框輸入用戶名
  2. 點擊驗證用戶名，服務端驗證該用戶是否已經占用了，如果是，則以json格式返回該用戶信息
  3. 假定king為已使用的用戶名
  4. 對頁面進行局部刷新，顯示返回的信息

思路分析：直接參考3.2的思路圖即可

image-20221209155804243

引入jquery庫：

image-20221209161446618

註意：如果有的資源是拷貝進來的，有時候運行目錄out沒有及時更新，這時可以點擊Rebuild Project，如果不行就redeploy Tomcat

image-20221209161941731

配置servlet：

<servlet>
    <servlet-name>CheckUserServlet2</servlet-name>
    <servlet-class>com.li.ajax.servlet.CheckUserServlet2</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>CheckUserServlet2</servlet-name>
    <url-pattern>/checkUserServlet2</url-pattern>
</servlet-mapping>

創建CheckUserServlet2：

package com.li.ajax.servlet;

import com.google.gson.Gson;
import com.li.ajax.entity.User;

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;

public class CheckUserServlet2 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //接收jquery發送的ajax數據
        String username = request.getParameter("username");//參數名取決於前端的參數名

        response.setContentType("text/json;charset=utf-8");//指定MIME類型為json

        Gson gson = new Gson();
        if ("king".equals(username)) {
            //後面可以接入資料庫database
            User user = new User(100, "king", "123", "[email protected]");
            response.getWriter().print(gson.toJson(user));
        } else {
            //返回一個不存在的User-->測試
            User user = new User(-1, "", "", "");
            response.getWriter().print(gson.toJson(user));
        }
    }
}

login2.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用戶註冊</title>
    <!--    引入jquery-->
    <script type="text/javascript" src="./script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //綁定事件
            $("#btn1").click(function () {
                //發出ajax請求
                /**
                 * 1.指定參數時，需要在{}裡面
                 * 2.指定參數時，需要指定參數名
                 * 3.dataType:"json" 代表要求伺服器返回的數據是json，
                 *          如果伺服器返回的不是json，就會解析出錯
                 */
                $.ajax({
                    url: "/ajax/checkUserServlet2",
                    type: "post",
                    data: {//這裡我們直接給一個json
                        username: $("#uname").val(),
                        date : new Date()//防止瀏覽器緩存
                    },
                    error:function () {//失敗後的回調函數
                        console.log("失敗")
                    },
                    success:function (data,status,xhr) {
                        console.log("成功");
                        console.log("data=",data);
                        console.log("status=",status);
                        console.log("xhr=",xhr);
                        //data是一個json對象，需要轉成json字元串
                        $("#div1").html(JSON.stringify(data));
                        //對返回的結果進行處理
                        if (""==data.username){//說明用戶名可用
                            $("#myres").val("該用戶名可用");
                        }else {
                            $("#myres").val("該用戶名不可用");
                        }
                    },
                    dataType:"json"
                })
            })
        })
    </script>
</head>
<body>
<h1>用戶註冊-Jquery+Ajax</h1>
<form action="/ajax/checkUserServlet2" method="post">
    用戶名字:<input type="text" name="username" id="uname">
    <input type="button" id="btn1" value="驗證用戶名">
    <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
    用戶密碼:<input type="password" name="password"><br/><br/>
    電子郵件:<input type="text" name="email"><br/><br/>
    <input type="submit" value="用戶註冊">
</form>
<h1>返回的 json 數據</h1>
<div id="div1"></div>
</body>
</html>

4.5.2$.get()應用實例

使用4.5的應用實例，將上面的html頁面改寫，其他不變。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用戶註冊</title>
    <!--    引入jquery-->
    <script type="text/javascript" src="./script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //綁定事件
            $("#btn1").click(function () {
                //演示$.get()使用
                // $.get()預設是get請求，不需要指定請求方式
                //不需要寫參數名，但是參數的位置要正確對應，
                // 順序是：url，data，success回調函數，返回的數據格式
                $.get(
                    "/ajax/checkUserServlet2",
                    {//這裡我們直接給一個json
                        username: $("#uname").val(),
                        date: new Date()//防止瀏覽器緩存
                    },
                    function (data, status, xhr) {
                        console.log("$.get成功")
                        console.log("data=", data);
                        console.log("status=", status);
                        console.log("xhr=", xhr);
                        //data是一個json對象，需要轉成json字元串
                        $("#div1").html(JSON.stringify(data));
                        //對返回的結果進行處理
                        if ("" == data.username) {//說明用戶名可用
                            $("#myres").val("該用戶名可用");
                        } else {
                            $("#myres").val("該用戶名不可用");
                        }
                    },
                    "json"
                )
            })
        })
    </script>
</head>
<body>
<h1>用戶註冊-Jquery+Ajax</h1>
<form action="/ajax/checkUserServlet2" method="post">
    用戶名字:<input type="text" name="username" id="uname">
    <input type="button" id="btn1" value="驗證用戶名">
    <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
    用戶密碼:<input type="password" name="password"><br/><br/>
    電子郵件:<input type="text" name="email"><br/><br/>
    <input type="submit" value="用戶註冊">
</form>
<h1>返回的 json 數據</h1>
<div id="div1"></div>
</body>
</html>

4.5.3$.post()應用實例

使用4.5的應用實例，將上面的html頁面改寫，其他不變。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用戶註冊</title>
    <!-- 引入jquery-->
    <script type="text/javascript" src="./script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //綁定事件
            $("#btn1").click(function () {
                //$.post 和 $.get的調用方式基本一樣，只是這時是以post方式發送ajax請求
                $.post(
                    "/ajax/checkUserServlet2",
                    {//這裡我們直接給一個json
                        username: $("#uname").val(),
                        date: new Date()//防止瀏覽器緩存
                    },
                    function (data, status, xhr) {
                        console.log("$.post成功")
                        console.log("data=", data);
                        console.log("status=", status);
                        console.log("xhr=", xhr);
                        //data是一個json對象，需要轉成json字元串
                        $("#div1").html(JSON.stringify(data));
                        //對返回的結果進行處理
                        if ("" == data.username) {//說明用戶名可用
                            $("#myres").val("該用戶名可用");
                        } else {
                            $("#myres").val("該用戶名不可用");
                        }
                    },
                    "json"
                )
            })
        })
    </script>
</head>
<body>
<h1>用戶註冊-Jquery+Ajax</h1>
<form action="/ajax/checkUserServlet2" method="post">
    用戶名字:<input type="text" name="username" id="uname">
    <input type="button" id="btn1" value="驗證用戶名">
    <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
    用戶密碼:<input type="password" name="password"><br/><br/>
    電子郵件:<input type="text" name="email"><br/><br/>
    <input type="submit" value="用戶註冊">
</form>
<h1>返回的 json 數據</h1>
<div id="div1"></div>
</body>
</html>
image-20221209172824191

4.5.4$.getJSON()應用實例

使用4.5的應用實例，將上面的html頁面改寫，其他不變。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用戶註冊</title>
    <!--    引入jquery-->
    <script type="text/javascript" src="./script/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //綁定事件
            $("#btn1").click(function () {
                //如果你通過jquery發出的ajax請求是get請求，並且返回的數據格式是json，
                // 可以直接使用getJSON()函數，很方便
                $.getJSON(
                    "/ajax/checkUserServlet2",
                    {//這裡我們直接給一個json
                        username: $("#uname").val(),
                        date: new Date()//防止瀏覽器緩存
                    },
                    function (data, status, xhr) {//成功後的回調函數
                        console.log("$.getJSON成功")
                        console.log("data=", data);
                        console.log("status=", status);
                        console.log("xhr=", xhr);
                        //data是一個json對象，需要轉成json字元串
                        $("#div1").html(JSON.stringify(data));
                        //對返回的結果進行處理
                        if ("" == data.username) {//說明用戶名可用
                            $("#myres").val("該用戶名可用");
                        } else {
                            $("#myres").val("該用戶名不可用");
                        }
                    }
                )
            })
        })
    </script>
</head>
<body>
<h1>用戶註冊-Jquery+Ajax</h1>
<form action="/ajax/checkUserServlet2" method="post">
    用戶名字:<input type="text" name="username" id="uname">
    <input type="button" id="btn1" value="驗證用戶名">
    <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
    用戶密碼:<input type="password" name="password"><br/><br/>
    電子郵件:<input type="text" name="email"><br/><br/>
    <input type="submit" value="用戶註冊">
</form>
<h1>返回的 json 數據</h1>
<div id="div1"></div>
</body>
</html>

image-20221209173356513 image-20221209173416142

4.6練習

● 需求分析: 到資料庫去驗證用戶名是否可用

  1. 點擊驗證用戶名, 到資料庫中驗證用戶名是否可用

  2. 創建資料庫 ajaxdb , 創建表 user 表 自己設計

  3. 使用 Jquery + ajax 方式， 服務端驗證該用戶名是否已經占用了, 如果該用戶已經占用，以 json 格式返回該用戶信息

  4. 對頁面進行局部刷新, 顯示返回信息

提示: 根據day34-JSON&Ajax02-3.3練習 的 ajax 請求+jdbc+mysql 到資料庫驗證案例完成

根據之前的day34-JSON&Ajax02-3.3練習，我們已經寫了JDBCUtilsByDruid，BaseDAO，UserDAO，UserService，User等類，只需要在CheckUserServlet2中修改一下代碼即可完成：

package com.li.ajax.servlet;

import com.google.gson.Gson;
import com.li.ajax.entity.User;
import com.li.ajax.service.UserService;

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;
import java.sql.SQLException;

public class CheckUserServlet2 extends HttpServlet {
    private UserService userService = new UserService();

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

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/json;charset=utf-8");//指定MIME類型為json
        Gson gson = new Gson();
        //接收jquery發送的ajax數據
        String username = request.getParameter("username");//參數名取決於前端的參數名
        //到資料庫中查找有無重名用戶
        try {
            User userByName = userService.getUserByName(username);
            //如果有返回的就是一個User對象，如果沒有，返回的就是null
            response.getWriter().print(gson.toJson(userByName));
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}

前端html頁面使用4.5.4的$.getJSON()方法發送ajax請求，在4.5.4代碼的基礎上修改返回數據的判斷條件即可：

image-20221209181353811

測試結果：

image-20221209181116698 image-20221209181146723
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一鍵部署MySQL8+keepalived雙主熱備高可用
    作者：李紅建 責編：宇亭 在第一期研發分享中，我們解釋了，為什麼Tinamu作為一款列式存儲引擎在初期不支持 Delete 功能的原因，然後對一些友商列式存儲引擎的 Delete 方案進行了一些調研和總結，感興趣的同學可以查看我們上一期的分享：關於列式資料庫實現 Delete 功能的調研之旅。 本期 ...
  • CloudCanal實現跨互聯網數據安全同步(進階)
    簡介 CloudCanal 實現的 基於 Kafka 構建安全的跨互聯網數據同步 方案被客戶用於生產後，又出現了新的需求，主要集中在方案能否更加輕量化和可控性上，簡而言之，去掉 Kafka 中轉，直接在 CloudCanal 中實現跨網路安全互通。 本篇文章即介紹 CloudCanal 實現的更加輕 ...
  • 雲資料庫技術行業動態：ClickHouse Cloud正式GA或有融資；openGauss社區引入新成員
    行業動態 ClickHouse Cloud正式GA，同時，B輪融資得到進一步增加 這是由ClickHouse官方推出雲服務，啟用新功能變數名稱：clickhouse.cloud ，類似於MongoDB的Atlas服務。目前支持在AWS構建，從Roadmap看，很快會推出GCP和Azure的版本。當前，官方會 ...
  • MYSQL-INNODB索引構成詳解
    作者：鄭啟龍 摘要： 對於MYSQL的INNODB存儲引擎的索引，大家是不陌生的，都能想到是 B+樹結構，可以加速SQL查詢。但對於B+樹索引，它到底“長”得什麼樣子，它具體如何由一個個位元組構成的，這些的基礎知識鮮有人深究。本篇文章從MYSQL行記錄開始說起，層層遞進，包括數據頁，B+樹聚簇索引，B ...
  • 1.5.5 HDFS讀寫解析-hadoop-最全最完整的保姆級的java大數據學習資料
    1.5.5 HDFS讀寫解析 1.5.5.1 HDFS讀數據流程 客戶端通過Distributed FileSystem向NameNode請求下載文件，NameNode通過查詢元數據， 找到文件塊所在的DataNode地址。 挑選一臺DataNode（就近原則，然後隨機）伺服器，請求讀取數據。 Da ...
  • JavaScript：變數的作用域，window對象，關鍵字var/let與function
    主要介紹關鍵字var/let/function在聲明變數和函數的時候，生命周期和作用域的細微區別，以及和window對象的關係 ...
  • 第一百一十一篇:基本引用類型Date
    好家伙，本篇為《JS高級程式設計》第五章的學習筆記 1.基本引用類型 引用值（或者對象）是某個特定引用類型的實例，在ECMAScript中，引用類型是把數據和功能組織到一起的結構，（像極了“類”） 經常被人錯誤的稱作“類”。 雖然從技術上講JavaScript是一門面向對象語言，但是ECMAScri ...
  • Vue中關於數組與對象修改觸發頁面更新的機制與原理簡析
    Vue中關於數組與對象修改觸發頁面更新的機制與原理簡析 相關問題 數組 使用索引直接賦值與直接修改數組length時，不會觸發頁面更新。 例如： <script> export default { name: "HomeView", data: () => ({ list1: ["A", "B"], ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類