jQuery 使用$.ajax()方法進行級聯查詢
$.ajax()方法可以使用 HTTP Get 和 HTTP Post 從遠程服務器上請求文本、HTML、XML 或 JSON 同時能夠把接收的資料更新到 DOM 物件
$.ajax()語法
$.ajax( { name:value, name:value, ... } )
說明：引數是 json 的資料，包含請求方式，資料，回呼方法等
async ： 布林值，表示請求是否異步處理，默認是 true
contentType ：發送資料到服務器時所使用的內容型別，默認是：
"application/x-www-form-urlencoded"，
data：規定要發送到服務器的資料，可以是：string， 陣列，多數是 json
dataType：期望從服務器回應的資料型別，jQuery 從 xml, json, text,, html 這些中測驗最可能
的型別
"xml" - 一個 XML 檔案
"html" - HTML 作為純文本
"text" - 純文本字串
"json" - 以 JSON 運行回應，并以物件回傳
error(xhr,status,error)：如果請求失敗要運行的函式, 其中 xhr, status, error 是自定義的形參名
success(result,status,xhr)：當請求成功時運行的函式，其中 result, status, xhr 是自定義的形參
名
type：規定請求的型別（GET 或 POST 等），默認是 GET， get，post 不用區分大小寫
url：規定發送請求的 URL，
demo
準備一個html檔案和一個java類實作HttpServlet介面并且重寫doget方法或者dopost方法
撰寫一個html檔案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../jquery-3.6.0/jquery-3.6.0.js"></script>
</head>
<!--使用jquery和ajax進行異步處理-->
<body>
<!--創建兩個選擇欄，根據第一個選擇欄的選擇情況改變第二個選擇欄的內容-->
<select id="main">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select id="second">
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
</select>
</body>
</html>
<script>
var $getmainselect = $("#main"); //獲取第一個選擇欄的jquery物件
var $getsecondselect = $("#second"); //獲取第二個選擇欄的jquery物件
var $getsecondoption = $("#second>option"); //獲取第二個選擇欄的全部選項的jquery物件
//當第一個選擇欄發生改變時進行觸發異步級聯操作
$getmainselect.on("change",function (){
var $getmainselected = $("#main>option:selected")
$.ajax({
async:true,
data:{"key":$getmainselected.text()},
dataType:"json",
error:function (){
$getsecondselect.empty();
},
success:function (data){
$getsecondoption.text(data.key);
},
type:'GET',
url:"../queryajaxtest"
})
})
</script>
撰寫一個java類實作HttpServlet介面
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
public class QueryAjaxTest extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
/*使用json方式傳值*/
String json="{}"; //當傳值為空的時候回傳{}
resp.setContentType("application/json;charset=UTF-8");
req.setCharacterEncoding("utf-8");
String key = req.getParameter("key"); //根據引數名獲取引數
/*這里可以加上根據獲取到的引數進行資料庫查詢和處理結果集之類的操作*/
/*網路上有很多根據類來構建json字串的jar包 例如：jackson*/
json = "{\"key\":\""+key+"\"}"; //因為是demo所以我就把引數本身以json方式回傳
PrintWriter out= resp.getWriter();
out.print(json); //輸出流輸出
out.flush();//重繪通道
out.close();//關閉
}
}
Servlet注冊
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0"
>
<servlet>
<servlet-name>queryajaxtest</servlet-name>
<servlet-class>test01.QueryAjaxTest</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>queryajaxtest</servlet-name>
<url-pattern>/queryajaxtest</url-pattern>
</servlet-mapping>
</web-app>
demo展示
當第一個選擇框改變內容時，第二個選擇框會根據第一個選擇框的內容進行改變
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/299204.html
標籤：其他