站長資訊網
在jquery中，可以利用“$.ajax”方法，該方法用于執行AJAX（異步HTTP）請求，通常用于其他方法不能完成的請求，語法為“$.ajax([settings])”；其中settings表示配置ajax請求的一系列鍵值對。
本文操作環境：windows10系統、jquery3.6.0版、Dell G3電腦。
jquery中怎么使用ajax請求
一、以前Ajax請求
Ajax請求的實現分為五個步驟：
- 創建請求對象
- 設置與服務器端的連接信息
- 向服務器發送數據
- 設置回調函數
- 接收服務器的響應數據
每次都寫這五個步驟顯得比較麻煩，所以使用jQuery的方法實現則較為簡潔。
二、使用jQuery實現
語法
$.ajax([settings])
settings為配置ajax請求的一系列鍵值對，具體參數說明如下表（參數來源菜鳥教程）
| 名稱 | 值/描述 |
|---|---|
| async | 布爾值，表示請求是否異步處理。默認是 true。 |
| beforeSend(xhr) | 發送請求前運行的函數。 |
| cache | 布爾值，表示瀏覽器是否緩存被請求頁面。默認是 true。 |
| complete(xhr,status) | 請求完成時運行的函數（在請求成功或失敗之后均調用，即在 success 和 error 函數之后）。 |
| contentType | 發送數據到服務器時所使用的內容類型。默認是：“application/x-www-form-urlencoded”。 |
| context | 為所有 AJAX 相關的回調函數規定 “this” 值。 |
| data | 規定要發送到服務器的數據。 |
| dataFilter(data,type) | 用于處理 XMLHttpRequest 原始響應數據的函數。 |
| dataType | 預期的服務器響應的數據類型。 |
| error(xhr,status,error) | 如果請求失敗要運行的函數。 |
| global | 布爾值，規定是否為請求觸發全局 AJAX 事件處理程序。默認是 true。 |
| ifModified | 布爾值，規定是否僅在最后一次請求以來響應發生改變時才請求成功。默認是 false。 |
| jsonp | 在一個 jsonp 中重寫回調函數的字符串。 |
| jsonpCallback | 在一個 jsonp 中規定回調函數的名稱。 |
| password | 規定在 HTTP 訪問認證請求中使用的密碼。 |
| processData | 布爾值，規定通過請求發送的數據是否轉換為查詢字符串。默認是 true。 |
| scriptCharset | 規定請求的字符集。 |
| success(result,status,xhr) | 當請求成功時運行的函數。 |
| timeout | 設置本地的請求超時時間（以毫秒計）。 |
| traditional | 布爾值，規定是否使用參數序列化的傳統樣式。 |
| type | 規定請求的類型（GET 或 POST）。 |
| url | 規定發送請求的 URL。默認是當前頁面。 |
| username | 規定在 HTTP 訪問認證請求中使用的用戶名。 |
| xhr | 用于創建 XMLHttpRequest 對象的函數。 |
三、實現步驟
在jsp/html頁面編寫頁面，并且發送ajax請求
用jQuery編寫登錄和注冊的頁面，具體代碼附在文章最后
以登錄功能的實現為例，ajax請求如下：
$.ajax({ type : "POST", //以post方法提交數據給服務器 url : "User", //提交數據到User dataType : "text", //數據類型 data : { //傳給服務器的數據 "name": $("#name").val(), "password":$("#pwd").val() }, success:function(msg) { //回調函數 if(msg =="OK"){ alert("登錄成功！"); } else{ alert("登錄失敗！"); } }});
編寫web.xml配置文件
剛剛的url地址User是什么，從哪里來，就是通過這個配置文件告訴計算機的
<servlet> <!-- servlet-name相當于是你想要找的文件的一個別名，一般用類名來代替 --> <servlet-name>User</servlet-name> <!-- servlet-class 是類的具體位置，不用加.java --> <servlet-class>scau.User</servlet-class> </servlet> <servlet-mapping> <!-- 這里的servlet-name必須和上面的一致 --> <servlet-name>User</servlet-name> <!--自己定義的名稱，url寫的就是這個 --> <url-pattern>/user</url-pattern> </servlet-mapping>
尋找關系：
編寫java類
接受前端傳進來的數據，通過編寫一個java類接受，處理
public class User extends HttpServlet { //因為剛剛請求是post，所以用doPost來接受參數 //如果用get，則用doGet接受參數 public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("--------------------------------------------------"); request.setCharacterEncoding("UTF-8"); // 接受前端傳進來的數據，即剛剛的data String name = request.getParameter("name"); String pwd = request.getParameter("password"); //在控制臺輸出參數，驗證是否正確 System.out.println("name:"+name); System.out.println("pwd:"+pwd); //根據自己的需求處理數據 //這里沒有連接數據庫，就假設已經用有一個用戶Lee,密碼是123，如果輸入這個則登錄成功，其余則登錄失敗 String msg = ""; if (name.equals("Lee") && pwd.equals("123")) { msg = "OK"; } else { msg = "bad"; } //輸出結果，看是否是預期結果 System.out.println("msg:"+msg); //返回數據給前端 //設置編碼 response.setContentType("text/html;charset=UTF-8"); //創建out對象 PrintWriter out = response.getWriter(); //返回msg給前端 out.write(msg); }}
現在再來看看我們的回調函數
success:function(msg) { //msg是剛剛java程序返回的數據 if(msg =="OK"){ //如果返回OK，則彈出登錄成功的頁面 alert("登錄成功！"); } else{ //其他則彈出登錄成功的頁面 alert("登錄失??！"); } }
三、總結
通過ajax實現前后端交互，主要過程是前端發送請求，后端接受請求，最后數據給前端。使用jQuery可以大大減低代碼量，也易于理解。其步驟主要分三大步驟：
- 編寫頁面，發送請求
- 編寫web.xml
- 編寫java類
相關教程推薦：AJAX視頻教程、jQuery視頻教程
