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