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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類