javaweb项目动态修改表格里的用户信息

来源：互联网发布：淘宝美工教程视频入门编辑：程序博客网时间：2024/06/05 20:44

在初次写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请求出现错误...');              }        });    });

简单效果：

这里写图片描述

完整前端代码：

<%@ 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>

阅读全文

0 0

javaweb项目 动态修改表格里的用户信息

解决途径：

具体实现：

简单效果：

完整前端代码：

javaweb项目动态修改表格里的用户信息