Javaweb05-Ajax

来源:https://www.cnblogs.com/xiaoqigui/archive/2022/08/06/16551683.html
-Advertisement-
Play Games

1、基於jQuery的Ajax 1.1 基本Ajax | 參數 | 說明 | | | | | url | 請求地址 | | type | 請求類型 | | data | 請求參數 | | dataType | 返回參數 | | success | 成功處理函數 | | error | 錯誤處理函數 ...


1、基於jQuery的Ajax

1.1 基本Ajax

參數 說明
url 請求地址
type 請求類型
data 請求參數
dataType 返回參數
success 成功處理函數
error 錯誤處理函數 
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js" ></script>
<script type="text/javascript">
	$(function(){
        //強調：基於javascript實現的ajax用法，比較繁瑣，不需要掌握
        //需要掌握的是基於jQuery方式使用的Ajax
        //當用戶登錄，輸入用戶名後，失去焦點，校驗登錄用戶名再系統中是否被使用
        $("#uname").blur(function(){
            //alert($(this).val());
            //獲取輸入的用戶名,並實現非空校驗
            var userName = $(this).val();
            if(userName == null || userName == ""){
                alert("用戶名不能為空");
                return;
            }

            //基於jAuery的Ajax用法-基本用法
            $.ajax({
                "url" : "<%=request.getContextPath()%>/checkUserName",
                "type" : "post",
                "data" : {"userName" : userName},
                "dataType" : "text",
                "success" : function(data){
                    //alert(JSON.parse(data));
                    if(JSON.parse(data)){
                        $("#showMsg").html("用戶名存在").css({"color":"red"});
                    }else{
                        $("#showMsg").html("用戶名可用").css({"color":"#2ceb0a"});
                    }
                },
                "error" : function(){
                    $("#showMsg").html("未知錯誤");
                }
            }); 
</script>

1.2 get提交Ajax

語法:$.get(url,params,success);

//基於JQuery的Ajax用法-擴展用法1，簡寫Get方，Ajax請求
//語法:$.get(url,params,success)
$.get("<%=request.getContextPath()%>/checkUserName",{"userName":serName},function(data){
    if(JSON.parse(data)){
        $("#showMsg").html("用戶名存在get").css({"color":"red"});
    }else{
        $("#showMsg").html("用戶名可用get").css({"color":"#2ceb0a"});
    }
});

1.3 post提交Ajax

語法:$.post(url,params,success);

//基於JQuery的Ajax用法-擴展用法1，簡寫Get方，Ajax請求
//語法:$.post(url,params,success)
$.post("<%=request.getContextPath()%>/checkUserName",{"userName" : userName},function(data){
    if(JSON.parse(data)){
        $("#showMsg").html("用戶名存在post").css({"color":"red"});
    }else{
        $("#showMsg").html("用戶名可用post").css({"color":"#2ceb0a"});
    }
});

1.4 請求處理

checkUserName 對應的處理代碼；通過Response返回結果，前端接收到結果併進行處理；

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    //後臺接收用戶名,校驗是否重覆
    //獲取用戶參數
    String userName = req.getParameter("userName");
    System.out.println("AjaxServlet userName=>>"+userName);

    //定義返回的結果
    boolean result= false;

    //模擬調用業務，查詢當前用戶名再數據中是否有記錄
    List<String> userNames = Arrays.asList("kh96","kgc","Ajax");
    if(userNames.contains(userName)) {
        result = true;
    }

    //非同步請求響應結果,註意println不可以用，返回的結果會帶\n
    System.out.println("AjaxServlet result==>"+result);
    resp.getWriter().println(result);
}

2、登錄請求處理，並展示數據

2.1 登錄頁面

loginAnime.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>登錄頁面</title>
<style type="text/css">
	table{
		background-color:pink;
	}
</style>
</head>
<body>
	<form action="<%=request.getContextPath()%>/loginAnime" method="get">
		<table border="1px" align="center" width="40%" cellspacing="0">
			<tr style="hight:60px; font-size:16px;background-color:#B9DEE0">
				<th colspan="2"> 歡迎登錄課工場KH96動漫管理系統 </th>
			</tr>
			<tr>
				<td>用戶名：</td>
				<td>
					<input type="text" name="uname" id="uname" placeholder="請輸入"用戶名> </input> 
					<span id = "showMsg"   style="text-align:center;"></span>
				</td>
			</tr>
			<tr>
				<td>用戶密碼：</td>
				<td>
					<input type="password" name="upwd" id="upwd" placeholder="請輸入用戶密碼"> </input> 
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<input type="submit" value="立即登錄" />
					<input type="reset" value="重新填寫" />
				</td>
			</tr>
		</table>
	</form>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js" ></script>
<script type="text/javascript">
	$(function(){
		$("#uname").blur(function(){
			//非同步請求校驗用戶名
			//基於jAuery的Ajax用法-基本用法
			$.post("<%=request.getContextPath()%>/checkUserName",{"userName" :$("#uname").val()},function(data){
				if(JSON.parse(data)){
					$("#showMsg").html("用戶名存在").css({"color":"#2ceb0a"});
				}else{
					$("#showMsg").html("用戶名不存在").css({"color":"red"});
				}
			});
		});
		
		$("form").submit(function(){
			//用戶名非空校驗
			var userName = $("#uname").val();
			//alert(userName);
			if(userName == null || userName == ""){
				alter("用戶名不能為空");
				//submi事件，接收false結果，會自動取消表單的提交
				return false;
			}
			
			//密碼非空
			var userPwd = $("#upwd").val();
			//alert(userPwd);
			if(userPwd == null || userPwd == ""){
				alter("用戶密碼不能為空");
				//submi事件，接收false結果，會自動取消表單的提交
				return false;
			}
		
			//非同步提交登錄請求，如果交談用戶信息輸入正確，提示登錄成功，寧跳轉到動漫管理首頁，否則提示登錄失敗
			$.post("<%=request.getContextPath()%>/loginAnime",{"userName" : userName,"userPwd":userPwd},function(data){
				if(JSON.parse(data)){
					alert("登錄成功");
					//請求後臺獲取動漫列表數據
					//location.href = "<%=request.getContextPath()%>/animes";
					//請求列表頁面，使用Ajax解析json數據
					location.href = "animeListJson.jsp";
					
				}else{
					alert("登錄失敗");
				}
			});
		
			//由於使用了Ajax進行了非同步登錄請求，此處表單就不能再提交,否者表達再提交會出錯
			return false;
		});	
			
	});
</script>
</html>

註意：再使用Ajaz提交表單時，一定要返回false,要不然表單會再提交一次；

2.2 存放數據

2.2.1 通過request域轉遞數據

AnimeServlet

public class AnimeServlet extends HttpServlet {

	private static final long serialVersionUID = -4726403189879316484L;

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		// 模擬從資料庫獲取動漫列表
		List<Animes> animes = new ArrayList<>();
		animes.add(new Animes(961, "玄幻", "鬥破蒼穹", "土豆", "蕭炎", "玄機科技", "2019-08-04"));
		animes.add(new Animes(962, "玄幻", "完美世界", "辰東", "石昊", "福煦影視", "2020-08-05"));
		animes.add(new Animes(963, "言情", "狐妖小紅娘", "小新", "白月初", "騰訊動漫", "2021-08-06"));
		animes.add(new Animes(964, "言情", "秦時明月", "溫世仁", "天明", "玄機科技", "2022-08-04"));
		animes.add(new Animes(965, "熱血", "鎮魂街", "許辰", "曹焱兵", "盧李工作室", "2018-08-04"));
		animes.add(new Animes(966, "熱血", "霧山五行", "林魂", "聞人翊懸", "六道無魚", "2018-08-04"));

				
		//將動漫集合放入request作用域
		req.setAttribute("animes", animes);
		
		//轉發到動漫列表頁面
		req.getRequestDispatcher("web5AjaxAndJquery/animeList.jsp").forward(req, resp);
		
	}	
}

2.2.2 將數據轉成json格式響應

public class AnimeJsonServlet extends HttpServlet {

	private static final long serialVersionUID = -4726403189879316484L;

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		// 模擬從資料庫獲取動漫列表
		List<Animes> animes = new ArrayList<>();
		animes.add(new Animes(961, "玄幻", "鬥破蒼穹", "土豆", "蕭炎", "玄機科技", "2019-08-04"));
		animes.add(new Animes(962, "玄幻", "完美世界", "辰東", "石昊", "福煦影視", "2020-08-05"));
		animes.add(new Animes(963, "言情", "狐妖小紅娘", "小新", "白月初", "騰訊動漫", "2021-08-06"));
		animes.add(new Animes(964, "言情", "秦時明月", "溫世仁", "天明", "玄機科技", "2022-08-04"));
		animes.add(new Animes(965, "熱血", "鎮魂街", "許辰", "曹焱兵", "盧李工作室", "2018-08-04"));
		animes.add(new Animes(966, "熱血", "霧山五行", "林魂", "聞人翊懸", "六道無魚", "2018-08-04"));

		//將集合數據，轉換為json字元串，返回給前端
		//阿裡巴巴的fasejson，將集合轉換為json字元串
		String animesJson = JSON.toJSONString(animes);
		
		System.out.println(animesJson);
		
		//響應
		resp.setContentType("text/html;charset=UTF-8");
		resp.setCharacterEncoding("UTF-8");
		resp.getWriter().print(animesJson);
		
	}	
}

3、獲取並展示數據

3.1 通過EL表達式取出request域域中的數據

animeList.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- 核心標簽庫 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- 格式化標簽庫 -->
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>動漫主頁</title>
	</head>
	<body>
		<h2 style="text-align: center">課工場KH96班動漫管理系統</h2>
		<p style="text-align: center">
			名稱：<input type="text" name="animeName" size="15"/>
			作者：<input type="text" name="animeAuthor" size="15"/>
			分類：<select name="animeCategory">
				<option value="0">全部</option>
				<option value="1">玄幻</option>
				<option value="2">武俠</option>
				<option value="3">言情</option>
				<option value="4">機甲</option>
			</select>
			<input type="button" value = "搜索"/>
		</p>
		<table border="1px" width="90%" cellspacing="0" align="center">
			<thead>
				<tr style="height: 80px; font-size: 30px; background-color: cyan;">
					<th colspan="8">動漫詳情列表</th>
				</tr>
				<tr>
					<th colspan="8" style="text-align: right;">歡迎：&nbsp;&nbsp;<a href="logout">退出登錄</a></th>
				</tr>
				<tr style="height: 40px; background-color: cyan;">
					<th>編號</th>
					<th>分類</th>
					<th>名稱</th>
					<th>作者</th>
					<th>主角</th>
					<th>出品</th>
					<th>時間</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<!-- tbody中是動態載入的數據列表 -->
				<c:forEach items="${animes}" var ="anime" varStatus="status">
					<tr align="center" 
						<c:if test="${status.index % 2 == 1 }">
			            	style = "background-color: pink;"
			            </c:if>
					>
						<td>${anime.animeId }</td>
						<td>${anime.animeCategory } </td>
						<td>${anime.animeNaem } </td>
						<td>${anime.animeAuthor } </td>
						<td>${anime.animeActor } </td>
						<td>${anime.animeProduce } </td>
						<td>${anime.animeTime } </td>
						<td>
							<a href="#">修改</a> &nbsp;&nbsp; | &nbsp;&nbsp;
							<a href="#">刪除</a>
						</td>
					</tr>
				</c:forEach>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="8" style="height: 40px; text-align: center">
						<input type="button" value="添加" id="addAnime"/>&nbsp;&nbsp;
						<a href="#">首頁</a>&nbsp;|&nbsp;
						<a href="#">&lt;&lt;上一頁</a>&nbsp;|&nbsp;
						<a href="#">下一頁&gt;&gt;</a>&nbsp;|&nbsp;
						<a href="#">尾頁</a>&nbsp;|&nbsp;
						共&nbsp;6&nbsp;條&nbsp;&nbsp;每頁&nbsp;10&nbsp;條&nbsp;當前第&nbsp;1&nbsp;頁&nbsp;/&nbsp;共&nbsp;1&nbsp;頁
					</td>
				</tr>
			</tfoot>
		</table>
	</body>
	
</html>

3.2 直接通過jQuery添加子標簽

animeListJson.jsp

//tbody部分
<tbody>
    <!-- 直接通過jQuery添加子標簽 -->

</tbody>

//處理成功返回的數據部分
"success": function(data){
    //確定數據動態顯示的位置
    var $tbody = $("tbody");
    //alert(data);
    //數據解析

    // 隔行變色
    var count = 1;

    // 數據解析
    $(data).each(function(){
        // 定義顏色
        var bgColor = count % 2 == 0 ? "style='background-color:#ddd;'" : "";
        $("tbody").append(
            "<tr align='center' " + bgColor + ">"
            + "<td>" + this.animeId + "</td>"
            + "<td>" + this.animeCategory + "</td>"
            + "<td>" + this.animeName + "</td>"
            + "<td>" + this.animeAuthor + "</td>"
            + "<td>" + this.animeActor + "</td>"
            + "<td>" + this.animeProduce + "</td>"
            + "<td>" + this.animeTime + "</td>"
            + "<td><a href='#'>修改</a>&nbsp;&nbsp;<a href='#'>刪除</a></td>"
            + "</tr>"
        );
        count++;
    });
}

展示效果：


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 記一次解決maven項目引入本地模塊找不到類的艱辛過程 ：The POM for xxx-common.jar:version is missing, no dependency information available | Could not resolve dependencies for project
    C語言的迴圈結構，有for(；；)迴圈，while()迴圈，do~while()迴圈，for迴圈使用最頻繁，三種語句都可以銜接break；continue；來進行中斷迴圈。 在for(；；)迴圈結構中，分號所隔開的語句是（初始化；判斷；調整），當都省略時即直接使用for(;;)時，預設為真，即進入死 ...
  • TortoiseGit的下載以及配置
    TortoiseGit 人稱小烏龜插件是一個來源的版本控制客戶端,和git功能類似, 不過相對於git支持界面操作. TortoiseGit下載地址: 點我下載 當前穩定版本是2.6.0, 建議下載此版本, 下麵是下載過程(winx64位系統): 預設是英文安裝, 需要中文的情況可以下載中文語言包 ...
  • 黑馬2022最新redis課程筆記知識點(面試用)持續更新
    redis入門 redis的常見五種數據類型 String類型 String類型，類似於java中的String類型，常見使用get，set方法。 ==String類型還可以存儲json字元串格式==。 Hash類型 Hash類型，也叫散列，它的value是一個無序字典，類似於java中HashMa ...
  • IOS OpenGL ES GPUImage 圖像加深混合 GPUImageDarkenBlendFilter
    目錄 一.簡介 二.效果演示 三.源碼下載 四.猜你喜歡 零基礎 OpenGL (ES) 學習路線推薦 : OpenGL (ES) 學習目錄 >> OpenGL ES 基礎 零基礎 OpenGL (ES) 學習路線推薦 : OpenGL (ES) 學習目錄 >> OpenGL ES 轉場 零基礎 O ...
  • 部署jar包windows服務工具
    背景 某個周末一個線上項目因為伺服器自動重啟導致了系統掛了，我們是通過jenkins部署的jar包所以需要手動重啟項目，解決問題後準備調換部署方式讓項目隨系統自動啟動，試用tomcat後發現啟動慢，並且日常開發springboot都是使用內置tomcat啟動，如果要保持和部署方式保持一致（避免本地代 ...
  • 那些捨不得刪除的 MP3--批量修改mp3的ID3tag
    1.七個網站的Python實戰代碼 1.汽車之家 def t1(): #汽車之家 ##請上傳JPG、JPEG、BMP格式圖片 import requests from requests_toolbelt import MultipartEncoder from bs4 import Beautifu ...
  • 12-Java中線程的狀態類型
    Java中線程的狀態類型 線程的狀態類型 源碼作者的原註釋關於線程內部類State描述了線程的六個狀態 A thread state. A thread can be in one of the following states: ①、NEW 尚未啟動的線程處於此狀態 源碼中的註釋 A thread ...
  • 後端編寫Swagger介面管理文檔
    Swagger介面管理文檔 訪問介面文檔的網頁：http://localhost:8080/swagger-ui/index.html 導入依賴 <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-boot-start ...
一周排行
    -Advertisement-
    Play Games
  • UOS 開啟 VisualStudio 遠程調試 .NET 應用之旅
    前言 在我們開發過程中基本上不可或缺的用到一些敏感機密數據，比如SQL伺服器的連接串或者是OAuth2的Secret等，這些敏感數據在代碼中是不太安全的，我們不應該在源代碼中存儲密碼和其他的敏感數據，一種推薦的方式是通過Asp.Net Core的機密管理器。 機密管理器 在 ASP.NET Core ...
  • C# - 能否讓 SortedSet.RemoveWhere 內傳入的委托非同步執行
    新改進提供的Taurus Rpc 功能，可以簡化微服務間的調用，同時可以不用再手動輸出模塊名稱，或調用路徑，包括負載均衡，這一切，由框架實現並提供了。新的Taurus Rpc 功能，將使得服務間的調用，更加輕鬆、簡約、高效。 ...
  • 順序棧的介面程式
    順序棧的介面程式 目錄順序棧的介面程式頭文件創建順序棧入棧出棧利用棧將10進位轉16進位數驗證 頭文件 #include <stdio.h> #include <stdbool.h> #include <stdlib.h> 創建順序棧 // 指的是順序棧中的元素的數據類型，用戶可以根據需要進行修改 ...
  • mORMot2 獲取數據集1
    前言 整理這個官方翻譯的系列，原因是網上大部分的 tomcat 版本比較舊，此版本為 v11 最新的版本。 開源項目 從零手寫實現 tomcat minicat 別稱【嗅虎】心有猛虎，輕嗅薔薇。 系列文章 web server apache tomcat11-01-官方文檔入門介紹 web serv ...
  • 萬字長文總結與剖析C語言關鍵字 -- <<C語言深度解剖>>
    C總結與剖析:關鍵字篇 -- <<C語言深度解剖>> 目錄C總結與剖析:關鍵字篇 -- <<C語言深度解剖>>程式的本質:二進位文件變數1.變數:記憶體上的某個位置開闢的空間2.變數的初始化3.為什麼要有變數4.局部變數與全局變數5.變數的大小由類型決定6.任何一個變數,記憶體賦值都是從低地址開始往高地 ...
  • 【Flink入門修煉】2-3 Flink Checkpoint 原理機制
    如果讓你來做一個有狀態流式應用的故障恢復，你會如何來做呢？ 單機和多機會遇到什麼不同的問題？ Flink Checkpoint 是做什麼用的？原理是什麼？ ...
  • C++ 多級繼承與多重繼承：代碼組織與靈活性的平衡
    C++ 多級繼承 多級繼承是一種面向對象編程（OOP）特性，允許一個類從多個基類繼承屬性和方法。它使代碼更易於組織和維護，並促進代碼重用。 多級繼承的語法 在 C++ 中，使用 : 符號來指定繼承關係。多級繼承的語法如下： class DerivedClass : public BaseClass1 ...
  • 圖文結合手把手教你創建SpringCloud項目
    前言 什麼是SpringCloud？ Spring Cloud 是一系列框架的有序集合，它利用 Spring Boot 的開發便利性簡化了分散式系統的開發，比如服務註冊、服務發現、網關、路由、鏈路追蹤等。Spring Cloud 並不是重覆造輪子，而是將市面上開發得比較好的模塊集成進去，進行封裝，從 ...
  • 類模板的常見用法
    class_template 類模板和函數模板的定義和使用類似，我們已經進行了介紹。有時，有兩個或多個類，其功能是相同的，僅僅是數據類型不同。類模板用於實現類所需數據的類型參數化 template<class NameType, class AgeType> class Person { publi ...
  • system-v IPC共用記憶體通信
    目錄system v IPC簡介共用記憶體需要用到的函數介面shmget函數--獲取對象IDshmat函數--獲得映射空間shmctl函數--釋放資源共用記憶體實現思路註意 system v IPC簡介 消息隊列、共用記憶體和信號量統稱為system v IPC(進程間通信機制)，V是羅馬數字5，是UNI ...
所有分類