登入登出的页面

为了省事,我们直接建个index.jsp,把内容放进去

下面就是内容了,自行复制粘贴了, 文件建在WebContent下面就好了. 留意一下,这里是引用新浪cdn的jquery,如果无法访问,自行换成其他可用地址吧.

  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>NutzBook demo</title>
  8. <!-- 导入jquery -->
  9. <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/2.0.3/jquery-2.0.3.min.js"></script>
  10. <!-- 把user id复制到一个js变量 -->
  11. <script type="text/javascript">
  12.     var me = '<%=session.getAttribute("me") %>';
  13.     var base = '${base}';
  14.     $(function() {
  15.         $("#login_button").click(function() {
  16.             $.ajax({
  17.                 url : base + "/user/login",
  18.                 type: "POST",
  19.                 data:$('#loginForm').serialize(),
  20.                 error: function(request) {
  21.                     alert("Connection error");
  22.                 },
  23.                 dataType:"json",
  24.                 success: function(data) {
  25.                     alert(data);
  26.                     if (data == true) {
  27.                         alert("登陆成功");
  28.                         location.reload();
  29.                     } else {
  30.                         alert("登陆失败,请检查账号密码")
  31.                     }
  32.                 }
  33.             });
  34.             return false;
  35.         });
  36.         if (me != "null") {
  37.             $("#login_div").hide();
  38.             $("#userInfo").html("您的Id是" + me);
  39.             $("#user_info_div").show();
  40.         } else {
  41.             $("#login_div").show();
  42.             $("#user_info_div").hide();
  43.         }
  44.     });
  45. </script>
  46. </head>
  47. <body>
  48. <div id="login_div">
  49.     <form action="#" id="loginForm" method="post">
  50.         用户名 <input name="username" type="text" value="admin">
  51.         密码 <input name="password" type="password" value="123456">
  52.         <button id="login_button">提交</button>
  53.     </form>
  54. </div>
  55. <div id="user_info_div">
  56.     <p id="userInfo"></p>
  57.     <a href="${base}/user/logout">登出</a>
  58. </div>
  59. </body>
  60. </html>

手册关联(选修)

无