我的主页: isfantasy.com

在初次写Javaweb项目时，遇到一个常见问题：

  • 如何将后台用户信息在前端表格中显示。
  • 如何在前端表格中动态修改（删除、更新）用户信息，并在前端部分刷新数据。

解决途径：

  • 在jsp文件中，利用jsp的特性<% %>使前端和后台结合，在前端jsp内容中使用Java循环在表格中插入内容。
  • 使用Ajax动态更改jsp内容即可。

具体实现：

  • 在表格插入内容：在jsp页面调用Java代码，循环往table中插入数据库中用户信息
<table border = "1">
			<tr>
				<td>用户名</td>
				<td>密码</td>
				<td>年龄</td>
				<td>电话</td>
				<td>操作</td>
			</tr>
			<%
				UserService Service = new UserService();
				List<User> list = Service.adminReadList();
				for(User t:list){%>
				<tr>
					<td id="username"><%=t.getUsername() %></td>
					<td id="password"><%=t.getPassword() %></td>
					<td id="age"><%=t.getAge() %></td>
					<td id="phone"><%=t.getPhone() %></td>
					<td><input type="button" value="删除" id="delete"><input type="button" value="修改" id="updata"></td>
				</tr>
				<%}
			%>
		</table>
  • Ajax更改jsp内容：用Ajax给每行的button添加click事件，配合后台Java动态更新表格部分数据。
$("#delete").live("click",function(e){
		var username = $(e.target).closest("tr").find("#username").text();
		alert(username);
		$.ajax({
			url:"./Delete",
			type:"post",
			datatype:"json",
			data:{
				"username" : username
			},
			success : function(msg){
				if(msg){
					alert("删除成功");
					$(e.target).closest("tr").fadeOut();
				}
				else{
					alert("删除失败");
				}
			},
			error:function(msg){  
		        alert('ajax请求出现错误...');  
		    }
		});
	});

简单效果：

java实现用户修改密码功能 java如何实现修改用户信息_ajax

完整前端代码：

<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" %>
<%@ page import="com.qmx.web.service.UserService" %>
<%@ page import="com.qmx.web.pro.User" %>
<!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=ISO-8859-1">
<title>所有用户</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
	$("#delete").live("click",function(e){
		var username = $(e.target).closest("tr").find("#username").text();
		alert(username);
		$.ajax({
			url:"./Delete",
			type:"post",
			datatype:"json",
			data:{
				"username" : username
			},
			success : function(msg){
				if(msg){
					alert("删除成功");
					$(e.target).closest("tr").fadeOut();
				}
				else{
					alert("删除失败");
				}
			},
			error:function(msg){  
		        alert('ajax请求出现错误...');  
		    }
		});
	});
	
	var oldUser;
	$("#updata").live("click",function(e){
		var user = $(e.target).closest("tr");
		oldUser = user;
		$("#UpdataDiv").css("display","block");
		var updataDiv = $("#UpdataForm");
		updataDiv.find("input[name='username']").val(user.find("#username").text());
		updataDiv.find("input[name='password']").val(user.find("#password").text());
		updataDiv.find("input[name='age']").val(user.find("#age").text());
		updataDiv.find("input[name='phone']").val(user.find("#phone").text());
	});
	
	$("#submit").live("click",function(e){
		var user = $(e.target).closest("#UpdataForm");
		$.ajax({
			url:"./Updata",
			type:"post",
			datatype:"json",
			data:{
				"username":$("input[name='username']").val(),
				"password":$("input[name='password']").val(),
				"age":$("input[name='age']").val(),
				"phone":$("input[name='phone']").val(),
			},
			success:function(msg){
				if(msg){
					oldUser.find("#username").text(user.find("input[name='username']").val());
					oldUser.find("#password").text(user.find("input[name='password']").val());
					oldUser.find("#age").text(user.find("input[name='age']").val());
					oldUser.find("#phone").text(user.find("input[name='phone']").val());
					$("#UpdataDiv").css("display","none");
					alert("更新成功");
				}
				else{
					alert("更新失败");
				}
			}
		});
	}); 
</script>
</head>
<body>
	<div>
		<table border = "1">
			<tr>
				<td>用户名</td>
				<td>密码</td>
				<td>年龄</td>
				<td>电话</td>
				<td>操作</td>
			</tr>
			<%
				UserService Service = new UserService();
				List<User> list = Service.adminReadList();
				for(User t:list){%>
				<tr>
					<td id="username"><%=t.getUsername() %></td>
					<td id="password"><%=t.getPassword() %></td>
					<td id="age"><%=t.getAge() %></td>
					<td id="phone"><%=t.getPhone() %></td>
					<td><input type="button" value="删除" id="delete"><input type="button" value="修改" id="updata"></td>
				</tr>
				<%}
			%>
		</table>
	</div>
	<div style="width:400px;height:300px;border:1px solid #000;display:none;position:absolute;left:40%;top:30%;" id="UpdataDiv">
		<form action="Updata" method="post" id="UpdataForm">
			姓名：<input type="text" name="username"><br>
			密码：<input type="text" name="password"><br>
			年龄：<input type="text" name="age"><br>
			电话：<input type="text" name="phone"><br>
			<input type="button" value="提交" id="submit">
		</form>
	</div>
</body>
</html>