jquery中如何使用ajax請求

本文小編為大家詳細(xì)介紹“jquery中如何使用ajax請求”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“jquery中如何使用ajax請求”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

在jquery中，可以利用“$.ajax”方法，該方法用于執(zhí)行AJAX（異步HTTP）請求，通常用于其他方法不能完成的請求，語法為“$.ajax([settings])”；其中settings表示配置ajax請求的一系列鍵值對。

本文操作環(huán)境：windows10系統(tǒng)、jquery3.6.0版、Dell G3電腦。

jquery中使用ajax請求

一、以前Ajax請求

Ajax請求的實(shí)現(xiàn)分為五個步驟：

1. 創(chuàng)建請求對象

2. 設(shè)置與服務(wù)器端的連接信息

3. 向服務(wù)器發(fā)送數(shù)據(jù)

4. 設(shè)置回調(diào)函數(shù)

5. 接收服務(wù)器的響應(yīng)數(shù)據(jù)

每次都寫這五個步驟顯得比較麻煩，所以使用jQuery的方法實(shí)現(xiàn)則較為簡潔。

二、使用jQuery實(shí)現(xiàn)

語法

$.ajax([settings])
settings為配置ajax請求的一系列鍵值對，具體參數(shù)說明如下表（參數(shù)來源菜鳥教程）

三、實(shí)現(xiàn)步驟

在jsp/html頁面編寫頁面，并且發(fā)送ajax請求

用jQuery編寫登錄和注冊的頁面，具體代碼附在文章最后

以登錄功能的實(shí)現(xiàn)為例，ajax請求如下：

$.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是什么，從哪里來，就是通過這個配置文件告訴計(jì)算機(jī)的

<servlet>
		<!-- servlet-name相當(dāng)于是你想要找的文件的一個別名，一般用類名來代替 -->
    <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類

接受前端傳進(jìn)來的數(shù)據(jù)，通過編寫一個java類接受，處理

public class User extends HttpServlet {
	
	//因?yàn)閯倓傉埱笫莗ost，所以用doPost來接受參數(shù)
	//如果用get，則用doGet接受參數(shù)
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		System.out.println("--------------------------------------------------");
		request.setCharacterEncoding("UTF-8");
		// 接受前端傳進(jìn)來的數(shù)據(jù)，即剛剛的data
		String name = request.getParameter("name");
		String pwd = request.getParameter("password");
		//在控制臺輸出參數(shù)，驗(yàn)證是否正確
		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é)果，看是否是預(yù)期結(jié)果
		System.out.println("msg:"+msg);
		//返回?cái)?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("登錄失??！");
    				}
    			}

讀到這里，這篇“jquery中如何使用ajax請求”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。