javaweb项目 动态修改表格里的用户信息
2017-12-09 22:33
302 查看
在初次写Javaweb项目时,遇到一个常见问题:
如何将后台用户信息在前端表格中显示。
如何在前端表格中动态修改(删除、更新)用户信息,并在前端部分刷新数据。
使用Ajax动态更改jsp内容即可。
Ajax更改jsp内容:用Ajax给每行的button添加click事件,配合后台Java动态更新表格部分数据。
如何将后台用户信息在前端表格中显示。
如何在前端表格中动态修改(删除、更新)用户信息,并在前端部分刷新数据。
解决途径:
在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请求出现错误...'); } }); });
简单效果:
完整前端代码:
<%@ 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>
相关文章推荐
- 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3):用户添加/修改/删除 vue表格组件 vue分页组件
- shiro 动态修改资源权限不需要重启项目或者重新登录用户
- Java web项目01 停车管理系统实现修改用户信息(五)
- 无人机项目获取用户信息并进行用户信息修改的angularjs部分
- Linux入门:usermod - 修改用户帐户信息
- 【学习笔记二】struts2的动态下载,使用Apache PoI生成excel表格,将用户信息以xls文件格式供用户下载
- 五、Asp.Net MVC4.0开发CMS系统案例之用户信息修改模块
- 用spring mvc+mybaties写用户信息修改出现HTTP 405 错误--Method not allowed
- Laravel大型项目系列教程(四)显示文章列表和用户修改文章
- jquery实现用户信息修改验证输入方法汇总
- 在Web.Config文件中使用configSource,避免动态修改web.config导致asp.net重启(另添加一个Config文件用于管理用户数据)
- ASP.NET中动态修改web.config中的设置项目(CS页代码)
- SQL第十七章项目案例:QQ用户信息管理系统
- 项目及人员管理系统-修改员工信息列表展示
- XMPP获取用户信息及修改用户信息
- datagridview动态锁定一列不允许用户修改其宽度
- 利用JQuery实现点击某个表格时出现下拉及修改其信息
- javaweb动态网站-----如何在javaweb项目中使用bootstrap框架
- JavaWeb项目实现文件上传动态显示进度
- android studio 导入github项目需要修改gradle信息