要求：通過 jQuery 優化網站源代碼中的發送 Ajax 請求部分 ...
1、jquery 中給 dom對象綁定事件：
語法一：
- $(選擇器).事件名稱( 事件的處理函數);
- $(選擇器)：定位 dom 對象，dom 對象可以有多個，一同綁定事件
- 事件名稱：就是 js 中事件去掉 on 後的部分，例如 js 中的單擊事件 onclick()，對應 jquery 中的事件名稱 --- click
- 事件的處理函數：就是一個 function，當事件發生時，會調用這個函數
- 慄子：
//給id是btn的按鈕綁定單擊事件
$("#btn").click(funtion(){
alert("btn按鈕單擊了");
})
語法二：
- $(選擇器).on( 事件名稱 , 事件的處理函數);
- 慄子：
//給id是btn的按鈕綁定單擊事件
$("#btn").on("click",function() { 處理按鈕單擊事件 } );
代碼練習：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
background: yellow;
width: 500px;
height: 300px;
}
</style>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
$(":button").click(function(){
//使用append增加dom對象
$("div").append("<input id='newBtn' type='button' value='我是新來的按鈕，來點我啊 ~ '/>");
//使用on函數給按鈕綁定事件
$(":button").on("click",function(){
alert("您可真帥 ~ ~ (❁´◡`❁)");
})
})
})
</script>
</head>
<body>
<div></div>
<input type="button" value="利用on函數,給div創建一個子對象(button),再給按鈕綁定一個click" />
<br/>
</body>
</html>
2、使用 jquery 的函數，實現 ajax 請求的處理：
- 使用 XMLHttpRequest 實現 ajax ，有4個步驟，jquery 簡化了 ajax 請求的處理
- jQuery 中提供了三個函數可以實現ajax請求的處理：
//$.post()和$.get() 的內部都調用了 $.ajax()
$.ajax();//jquery中實現ajax的核心函數。
$.post();//使用post方式做ajax請求。
$.get();//使用get方式發送ajax請求。
- $.ajax( { name:value, name:value, ... } );
- $.ajax 函數的參數表示請求的url， 請求的方式，參數值等信息
- $.ajax() 中的每一個參數都是 json中的 數據，包含請求方式，數據，回調方法等
參數介紹：
- 主要使用的是 url , data ,dataType, success 。
async ： 布爾值，表示請求是否非同步處理，預設是 true【可以不寫】。
contentType ：發送數據到伺服器時所使用的內容類型【可以不寫】。
data：表示要發送到伺服器的數據，可以是 string，數組，json。
dataType：表示 期望從伺服器端返回的數據格式，可選的有： xml ， html ，text ，json；當我們使用 $.ajax() 發送請求時， 會把 dataType 的值發送給伺服器， 那我們的 servlet 能夠讀取到 dataType的值，就知道你的瀏覽器需要的是 json 或者 xml 的數據，那麼伺服器就可以返回你需要的數據格式。
error(xhr,status,error)：如果請求失敗要運行的函數,，其中 xhr, status, error 是自定義的形參名（xhr 是 XMLHttpRequest 對象）【可以不寫】。
success(result,status,xhr)：當請求成功時運行的函數，其中 result, status, xhr 是自定義的形參名（xhr 是 XMLHttpRequest 對象），對應之前的 XMLHttpRequest 對象（readyState==4 && status==200）。
type：規定請求的類型（get 或 post ），預設是 get【可以不寫】。
url：請求的地址。
代碼練習：
- 原網站源代碼：
- 【JavaWeb-Ajax】網站 --- 通過省份 id 獲取省份信息（通過Ajax實現局部刷新）
- 要求：通過 jQuery 優化原網站源代碼中的發送 Ajax 請求部分。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<!--先載入jQuery工具包-->
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
//獲取省份id
var id = $("#provinceId").val();
//發起Ajax請求
$.ajax({
url: "queryProvinceMessage",
data: {
"provinceId": id,
},
dataType: "json",
success: function (resp) {
//resp是json對象
//將服務端數據打回到相應的文本框中
$("#provinceName").val(resp.provinceName);
$("#provinceJianCheng").val(resp.jianCheng);
$("#provinceShengHui").val(resp.shengHui);
}
});
});
})
</script>
</head>
<body>
<p>通過省份ID來獲取省份信息</p>
<table>
<tr>
<td>省份編號：</td>
<td>
<input type="text" id="provinceId">
<input type="button" value="搜索" id="btn">
</td>
</tr>
<tr>
<td>省份名稱：</td>
<td><input type="text" id="provinceName"></td>
</tr>
<tr>
<td>省份簡稱：</td>
<td><input type="text" id="provinceJianCheng"></td>
</tr>
<tr>
<td>省會名稱：</td>
<td><input type="text" id="provinceShengHui"></td>
</tr>
</table>
</body>
</html>
