user/list.jsp 用户一览页

来吧,各种CV党

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>用户列表</title>
  8. <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/2.0.3/jquery-2.0.3.min.js"></script>
  9. <script type="text/javascript">
  10.     var pageNumber = 1;
  11.     var pageSize = 10;
  12.     var base = '<%=request.getAttribute("base")%>';
  13.     function user_reload() {
  14.         $.ajax({
  15.             url : base + "/user/query",
  16.             data : $("#user_query_form").serialize(),
  17.             dataType : "json",
  18.             success : function(data) {
  19.                 console.log(data);
  20.                 $("#user_count").html("共"+data.pager.recordCount+"个用户, 总计"+data.pager.pageCount+"页");
  21.                 var list_html = "";
  22.                 console.log(data.list);
  23.                 for (var i=0;i<data.list.length;i++) {
  24.                     var user = data.list[i];
  25.                     console.log(user);
  26.                     var tmp = "\n<p>" + user.id + " " + user.name
  27.                               + " <button onclick='user_update(" + user.id +");'>修改</button> "
  28.                               + " <button onclick='user_delete(" + user.id +");'>删除</button> "
  29.                               + "</p>";
  30.                     list_html += tmp;
  31.                 }
  32.                 $("#user_list").html(list_html);
  33.             }
  34.         });
  35.     }
  36.     $(function() {
  37.         user_reload();
  38.         $("#user_query_btn").click(function() {
  39.             user_reload();
  40.         });
  41.         $("#user_add_btn").click(function() {
  42.             $.ajax({
  43.                 url : base + "/user/add",
  44.                 data : $("#user_add_form").serialize(),
  45.                 dataType : "json",
  46.                 success : function(data) {
  47.                     if (data.ok) {
  48.                         user_reload();
  49.                         alert("添加成功");
  50.                     } else {
  51.                         alert(data.msg);
  52.                     }
  53.                 }
  54.             });
  55.         });
  56.     });
  57.     function user_update(userId) {
  58.         var passwd = prompt("请输入新的密码");
  59.         if (passwd) {
  60.             $.ajax({
  61.                 url : base + "/user/update",
  62.                 data : {"id":userId,"password":passwd},
  63.                 dataType : "json",
  64.                 success : function (data) {
  65.                     if (data.ok) {
  66.                         user_reload();
  67.                         alert("修改成功");
  68.                     } else {
  69.                         alert(data.msg);
  70.                     }
  71.                 }
  72.             });
  73.         }
  74.     };
  75.     function user_delete(userId) {
  76.         var s = prompt("请输入y确认删除");
  77.         if (s == "y") {
  78.             $.ajax({
  79.                 url : base + "/user/delete",
  80.                 data : {"id":userId},
  81.                 dataType : "json",
  82.                 success : function (data) {
  83.                     if (data.ok) {
  84.                         user_reload();
  85.                         alert("删除成功");
  86.                     } else {
  87.                         alert(data.msg);
  88.                     }
  89.                 }
  90.             });
  91.         }
  92.     };
  93. </script>
  94. </head>
  95. <body>
  96. <div>
  97.     <form action="#" id="user_query_form">
  98.         条件<input type="text" name="name">
  99.         页数<input type="text" name="pageNumber" value="1">
  100.         每页<input type="text" name="pageSize" value="10">
  101.     </form>
  102.     <button id="user_query_btn">查询</button>
  103.     <p>---------------------------------------------------------------</p>
  104.     <p id="user_count"></p>
  105.     <div id="user_list">
  107.     </div>
  108. </div>
  109. <div>
  110.     <p>---------------------------------------------------------------</p>
  111. </div>
  112. <div id="user_add">
  113.     <form action="#" id="user_add_form">
  114.         用户名<input name="name">
  115.         密码<input name="password">
  116.     </form>
  117.     <button id="user_add_btn">新增</button>
  118. </div>
  119. </body>
  120. </html>