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

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

简单效果:

javaweb项目 动态修改表格里的用户信息_第1张图片

完整前端代码:

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

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

你可能感兴趣的:(后台学习)