Javaweb05-Ajax-有解無憂

1、基于jQuery的Ajax

1.1 基本Ajax

引數	說明
url	請求地址
type	請求型別
data	請求引數
dataType	回傳引數
success	成功處理函式
error	錯誤處理函式

<script type="text/javascript" src="https://www.cnblogs.com/xiaoqigui/p/${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"  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="https://www.cnblogs.com/xiaoqigui/p/立即登錄" />
					<input type="reset" value="https://www.cnblogs.com/xiaoqigui/p/重新填寫" />
				</td>
			</tr>
		</table>
	</form>
</body>
<script type="text/javascript" src="https://www.cnblogs.com/xiaoqigui/p/${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 = "https://www.cnblogs.com/xiaoqigui/p//animes";
					//請求串列頁面，使用Ajax決議json資料
					location.href = "https://www.cnblogs.com/xiaoqigui/p/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="https://www.cnblogs.com/xiaoqigui/p/0">全部</option>
				<option value="https://www.cnblogs.com/xiaoqigui/p/1">玄幻</option>
				<option value="https://www.cnblogs.com/xiaoqigui/p/2">武俠</option>
				<option value="https://www.cnblogs.com/xiaoqigui/p/3">言情</option>
				<option value="https://www.cnblogs.com/xiaoqigui/p/4">機甲</option>
			</select>
			<input type="button" value = "https://www.cnblogs.com/xiaoqigui/p/搜索"/>
		</p>
		<table border="1px"  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="https://www.cnblogs.com/xiaoqigui/p/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="https://www.cnblogs.com/xiaoqigui/p/#">修改</a> &nbsp;&nbsp; | &nbsp;&nbsp;
							<a href="https://www.cnblogs.com/xiaoqigui/p/#">洗掉</a>
						</td>
					</tr>
				</c:forEach>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="8" style="height: 40px; text-align: center">
						<input type="button" value="https://www.cnblogs.com/xiaoqigui/p/添加" id="addAnime"/>&nbsp;&nbsp;
						<a href="https://www.cnblogs.com/xiaoqigui/p/#">首頁</a>&nbsp;|&nbsp;
						<a href="https://www.cnblogs.com/xiaoqigui/p/#">&lt;&lt;上一頁</a>&nbsp;|&nbsp;
						<a href="https://www.cnblogs.com/xiaoqigui/p/#">下一頁&gt;&gt;</a>&nbsp;|&nbsp;
						<a href="https://www.cnblogs.com/xiaoqigui/p/#">尾頁</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='https://www.cnblogs.com/xiaoqigui/p/#'>修改</a>&nbsp;&nbsp;<a href='https://www.cnblogs.com/xiaoqigui/p/#'>洗掉</a></td>"
            + "</tr>"
        );
        count++;
    });
}

展示效果：

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/501151.html

標籤：Java

上一篇：【Java面試】這道互聯網高頻面試題難住了80%的程式員？索引什么時候失效？

下一篇：后端撰寫Swagger介面管理檔案