SpringMVC框架,json

需求:以前点击个人明细的时候,是新开一个窗口进行展示,现在我们要实现的效果是点击明细的时候,直接在当前页面的下方进行明细信息的展示。并且页面不刷新。

这就需要是用ajax来实现异步请求。

首先在userlist.jsp页面中添加一个div,用来存放要展示的明细信息的条目

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/jsp/common/head.jsp"%>
        <div class="right">
            <div class="location">
                <strong>你现在所在的位置是:</strong>
                <span>用户管理页面</span>
            </div>
            <div class="search">
                <form method="post" action="${pageContext.request.contextPath }/user/userlist.html">
                    <input name="method" value="query" class="input-text" type="hidden">
                     <span>用户名:</span>
                     <input name="queryname" class="input-text"  type="text" value="${queryUserName }">
                      
                     <span>用户角色:</span>
                     <select name="queryUserRole">
                        <c:if test="${roleList != null }">
                           <option value="0">--请选择--</option>
                           <c:forEach var="role" items="${roleList}">
                                <option <c:if test="${role.id == queryUserRole }">selected="selected"</c:if>
                                value="${role.id}">${role.roleName}</option>
                           </c:forEach>
                        </c:if>
                    </select>
                      
                     <input type="hidden" name="pageIndex" value="1"/>
                     <input  value="查 询" type="submit" id="searchbutton">
                     <a href="${pageContext.request.contextPath}/user/useradd.html" >添加用户</a>
                </form>
            </div>
            <!--用户-->
            <table class="providerTable" cellpadding="0" cellspacing="0">
                <tr class="firstTr">
                    <th width="10%">用户编码</th>
                    <th width="20%">用户名称</th>
                    <th width="10%">性别</th>
                    <th width="10%">年龄</th>
                    <th width="10%">电话</th>
                    <th width="10%">用户角色</th>
                    <th width="30%">操作</th>
                </tr>
                   <c:forEach var="user" items="${userList }" varStatus="status">
                    <tr>
                        <td>
                        <span>${user.userCode }</span>
                        </td>
                        <td>
                        <span>${user.userName }</span>
                        </td>
                        <td>
                            <span>
                                <c:if test="${user.gender==1}">男</c:if>
                                <c:if test="${user.gender==2}">女</c:if>
                            </span>
                        </td>
                        <td>
                        <span>${user.age}</span>
                        </td>
                        <td>
                        <span>${user.phone}</span>
                        </td>
                        <td>
                            <span>${user.userRoleName}</span>
                        </td>
                        <td>
                        <span><a class="viewUser" href="javascript:;" userid=${user.id } username=${user.userName }><img src="${pageContext.request.contextPath }/statics/images/read.png" alt="查看" title="查看"/></a></span>
                        <span><a class="modifyUser" href="javascript:;" userid=${user.id } username=${user.userName }><img src="${pageContext.request.contextPath }/statics/images/xiugai.png" alt="修改" title="修改"/></a></span>
                        <span><a class="deleteUser" href="javascript:;" userid=${user.id } username=${user.userName }><img src="${pageContext.request.contextPath }/statics/images/schu.png" alt="删除" title="删除"/></a></span>
                        </td>
                    </tr>
                </c:forEach>
            </table>
            <input type="hidden" id="totalPageCount" value="${totalPageCount}"/>
            <c:import url="rollpage.jsp">
                <c:param name="totalCount" value="${totalCount}"/>
                <c:param name="currentPageNo" value="${currentPageNo}"/>
                <c:param name="totalPageCount" value="${totalPageCount}"/>
            </c:import>
            <!-- 下面用于展示的随机个人详细信息的div -->
             <div class="providerAdd">
                <div>
                    <label>用户编码:</label>
                    <input type="text" id="v_userCode" value="" readonly="readonly">
                </div>
                <div>
                    <label>用户名称:</label>
                    <input type="text" id="v_userName" value="" readonly="readonly">
                </div>
                <div>
                    <label>用户性别:</label>
                    <input type="text" id="v_gender" value="" readonly="readonly">
                </div>
                <div>
                    <label>出生日期:</label>
                    <input type="text" Class="Wdate" id="v_birthday" value=""
                    readonly="readonly" onclick="WdatePicker();">
                </div>
                <div>
                    <label>用户电话:</label>
                    <input type="text" id="v_phone" value="" readonly="readonly">
                </div>
                <div>
                    <label>用户角色:</label>
                    <input type="text" id="v_userRoleName" value="" readonly="readonly">
                </div>
                <div>
                    <label>用户地址:</label>
                    <input type="text" id="v_address" value="" readonly="readonly">
                </div>
            </div>
        </div>
    </section>
 
<!--点击删除按钮后弹出的页面-->
<div class="zhezhao"></div>
<div class="remove" id="removeUse">
    <div class="removerChid">
        <h2>提示</h2>
        <div class="removeMain">
            <p>你确定要删除该用户吗?</p>
            <a href="#" id="yes">确定</a>
            <a href="#" id="no">取消</a>
        </div>
    </div>
</div>
 
<%@include file="/WEB-INF/jsp/common/foot.jsp" %>
<script type="text/javascript" src="${pageContext.request.contextPath }/statics/js/userlist.js"></script>

  userlist.js

 

 UserController.java

 

 运行结果:

 

posted on   ~码铃薯~  阅读(169)  评论(0编辑  收藏  举报

编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示