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="https://www.cnblogs.com/Burning-youth/p/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='https://www.cnblogs.com/Burning-youth/p/我是新來的按鈕，來點我啊 ~'/>");
//使用on函式給按鈕系結事件
$(":button").on("click",function(){
alert("您可真帥 ~ ~ (?′?`?)");
})
})
})
</script>
</head>
<body>
<div></div>
<input type="button" value="https://www.cnblogs.com/Burning-youth/p/利用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="https://www.cnblogs.com/Burning-youth/p/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="https://www.cnblogs.com/Burning-youth/p/搜索" 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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/452822.html
標籤：Java