profile.jsp 3.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <%--
  2. Created by IntelliJ IDEA.
  3. User: Administrator
  4. Date: 2018/4/10 0010
  5. Time: 14:12
  6. To change this template use File | Settings | File Templates.
  7. --%>
  8. <%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
  9. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
  10. <html>
  11. <head>
  12. <title>用户详情页</title>
  13. <script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>
  14. </head>
  15. <body>
  16. <div>
  17. <div>
  18. 头像 <img alt="用户头像" src="${base}/user/profile/avatar" />
  19. <p />
  20. <form action="${base}/user/profile/avatar" method="post" enctype="multipart/form-data">
  21. 头像文件 <input type="file" name="file" />
  22. <button type="submit">更新头像</button>
  23. </form>
  24. <span style="color: #f00">
  25. <%
  26. if (session.getAttribute("upload-error-msg") != null) {
  27. String msg = session.getAttribute("upload-error-msg").toString();
  28. out.print(msg);
  29. session.removeAttribute("upload-error-msg");
  30. }
  31. %>
  32. </span>
  33. <p />
  34. </div>
  35. </div>
  36. <div>
  37. <form action="#" id="user_profile" method="post">
  38. <div>
  39. id: <c:out value="${obj.userId}"></c:out><p />
  40. </div>
  41. <div>
  42. 昵称:<input name="nickname" value="${obj.nickname}" /><p />
  43. </div>
  44. <div>
  45. 邮箱:<input name="email" value="${obj.email}"><p />
  46. </div>
  47. <div>
  48. 邮箱验证状态:<c:out value="${obj.emailChecked}"></c:out><p />
  49. </div>
  50. <div>
  51. 性别:<input name="gender" value="${obj.gender}"><p />
  52. </div>
  53. <div>
  54. 个性签名:<input name="description" value="${obj.description}"><p />
  55. </div>
  56. <div>
  57. 地理位置:<input name="location" value="${obj.location}"><p />
  58. </div>
  59. </form>
  60. <button type="button" id="user_profile_btn">更新</button>
  61. </div>
  62. <script>
  63. var base = '${base}';
  64. $.fn.serializeObject = function () {
  65. var o = {};
  66. var a = this.serializeArray();
  67. $.each(a, function () {
  68. if (o[this.name] !== undefined) {
  69. if (! o[this.name].push) {
  70. o[this.name] = [ o[this.name] ];
  71. }
  72. o[this.name].push(this.value || '');
  73. } else {
  74. o[this.name] = this.value || '';
  75. }
  76. });
  77. return o;
  78. }
  79. $(function () {
  80. $('#user_profile_btn').click(function () {
  81. $.ajax({
  82. url: base + '/user/profile/update',
  83. type: 'POST',
  84. data: JSON.stringify($('#user_profile').serializeObject()),
  85. success: function () {
  86. location.reload();
  87. }
  88. });
  89. });
  90. });
  91. </script>
  92. </body>
  93. </html>