Java异步请求与数据清理-CSDN博客

本文链接：https://blog.csdn.net/weixin_42223701/article/details/121285265

这篇博客介绍了在Java中进行异步请求时如何有效管理并解析数据。首先讲解了如何删除已有的数据以避免重复获取，如使用jQuery选择器删除表格中的特定行。接着，讨论了在获取多个信息时，通过删除所有之前请求的数据来确保每次请求的唯一性。最后，提到了分组获取数据的相关策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

获取一条数据

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page isELIgnored="false"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'demo.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="js/jQuery.js"></script>
	<script type="text/javascript" src="bootstrap/bootstrap.js"></script>
	<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.css">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript">
		$(function(){
			var emp;
			$("a:eq(0)").click(function(){
				$("table tr:eq(1)").remove();
				$.ajax({
					type:"post",
					url:"emp/getOne",
					data:"id=7654",
					dataType:"JSON",
					async:false,
					success:function(data){
						var table=$("table");
						table.append("<tr>"+
						"<td>"+data.empno+"</td>"+
						"<td>"+data.ename+"</td>"+
						"<td>"+data.job+"</td>"+
						"<td>"+data.sal+"</td>"+
						"<td>"+data.mgr+"</td>"+
						"<td>"+data.hiredate+"</td>"+
						"<td>"+data.comm+"</td>"+
						"<td>"+data.deptno+"</td>"+
						"<td><button class='btn btn-success btn-sx'>删除</button></td>"+
						"</tr>")
					}
				})
			})
			$("a:eq(1)").click(function(){
				
			})

		})
	</script>

  </head>
 
  <body>
	<a href="javascript:void(0)">取得一个雇员信息</a><br/>
	<a href="javascript:void(0)">取得多个雇员信息</a>
	<div class="container">
	<div class="row">
		<div class="col-md-6">
			<table class="table-bordered table-striped table-condensed table-hover">
		<tr>
			<th>编号</th><th>姓名</th><th>职位</th><th>薪资</th>
			<th>领导编号</th><th>入职日期</th><th>佣金</th>
			<th>部门编号</th><th>操作</th>
		</tr>
	</table>
		</div>
	</div>
	</div>
  </body>
</html>

$(“table tr:eq(1)”).remove();第二次请求是删除之前的数据，避免重复获取
在这里插入图片描述

获取多个信息

			$("a:eq(1)").click(function(){
				var table = $("table");
				$("table tr:gt(0)").remove();
				$.ajax({
					type:"post",
					url:"emp/list",
					data:"cp=1&ls=10&kw=A",
					dataType:"json",
					success:function(data){
						//对json数据进行遍历
						for(var i=0;i<data.length;i++){
							table.append("<tr>"+
							"<td>"+data[i].empno+"</td>"+
							"<td>"+data[i].ename+"</td>"+
							"<td>"+data[i].job+"</td>"+
							"<td>"+data[i].sal+"</td>"+
							"<td>"+data[i].mgr+"</td>"+
							"<td>"+data[i].hiredate+"</td>"+
							"<td>"+data[i].comm+"</td>"+
							"<td>"+data[i].deptno+"</td>"+
							"<td><button class='btn btn-success btn-sx'>删除</button></td>"+
							"</tr>");
						}
					}
				}
				)
				
			}

$(“table tr:gt(0)”).remove();保证每次请求时，删除之前的请求。tr:gt(0)行索引大于0的,也就是删除首行以外的数据

			$("a:eq(1)").click(function(){
				var table = $("table");
				$("table tr:gt(0)").remove();
				$.ajax({
					type:"post",
					url:"emp/list",
					data:"kw=A&cp=1&ls=10",
					dataType:"json",
					success:function(data){
						//对json数据进行遍历
						$.each(data,function(index){//data是要迭代的集合，index是索引从0开始
							table.append("<tr>"+
							"<td>"+data[index].empno+"</td>"+
							"<td>"+data[index].ename+"</td>"+
							"<td>"+data[index].job+"</td>"+
							"<td>"+data[index].sal+"</td>"+
							"<td>"+data[index].mgr+"</td>"+
							"<td>"+data[index].hiredate+"</td>"+
							"<td>"+data[index].comm+"</td>"+
							"<td>"+data[index].deptno+"</td>"+
							"<td><button class='btn btn-success btn-sx'>删除</button></td>"+
							"</tr>");
						})
						}
					})
				}
				
			)

在这里插入图片描述

分组获取

			$("a:eq(1)").click(function(){
				var table = $("table");
				$("table tr:gt(0)").remove();
				$.ajax({
					type:"post",
					url:"emp/list",
					//async:false,
					data:"kw=A&cp=1&ls=10",
					dataType:"json",
					success:function(data){
						$("table").remove();
						$("h1").remove;
						//对json数据进行遍历
						//迭代map集合
						$.each(data,function(key,value){
							$("#div1").append("<h1>"+key+"</h1>");
							//生成每个表格的表头信息（每个表格保存一种职位的雇员信息）
							$("#div1").append(
								$("#div1").append(
								"<table class='table-bordered table-striped table-condensed table-hover' id='"+key+"' border=1>"+
									"<tr>"+
									"<th>编号</th><th>姓名</th><th>职位</th><th>薪资</th>"+
									"<th>领导编号</th><th>入职日期</th><th>佣金</th>"+
									"<th>部门编号</th><th>操作</th>"+
									"<tr>"+
								 "</table>"
							);
							//对当前职位的雇员列表进行迭代
							//value:当前职位的雇员集合
							//index动态产生的下标，从0开始
							$.each(value,function(index){
								$("#"+key).append("<tr>"+
									"<td>"+value[index].empno+"</td>"+
									"<td>"+value[index].ename+"</td>"+
									"<td>"+value[index].job+"</td>"+
									"<td>"+value[index].sal+"</td>"+
									"<td>"+value[index].mgr+"</td>"+
									"<td>"+value[index].hiredate+"</td>"+
									"<td>"+value[index].comm+"</td>"+
									"<td>"+value[index].deptno+"</td>"+
									"<td><button class='btn btn-success btn-sx'>删除</button></td>"+
									"</tr>");
							})
						})
						}
					})
				}
				
			)