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