生活随笔
收集整理的這篇文章主要介紹了
【JSP】用户信息界面操作 ---- 用户信息修改
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 用戶信息界面操作 ---- 用戶信息修改
- Ⅰ.修改userinfo.jsp 實現修改頁面跳轉
- Ⅱ.創建 userUpdate.jsp 修改頁面
- Ⅲ.完善 dbHelper類，添加用戶修改方法
- Ⅳ.創建 upDataServlet，實現用戶信息修改功能
- Ⅴ.效果展示
用戶信息界面操作 ---- 用戶信息修改
Ⅰ.修改userinfo.jsp 實現修改頁面跳轉
- 之前在設計userinfo.jsp中的操作內容時，并沒有具體的實現。今天來實現一個簡單的用戶修改功能。
- href="userUpdate.jsp?username=<%=resultSet.getString(2)%>"" 這里使用超鏈接的方式將當前界面的要修改的用戶的姓名傳入新的頁面userUpdate.js進行處理。
<td
><%--問號右邊表示要傳遞的內容
--%><a href
="DeleteServlet?username=<%=resultSet.getString(2)%>" style
="color: red">刪除
</a
>|<a href
="userUpdate.jsp?username=<%=resultSet.getString(2)%>" style
="color:blue">修改
</a
>|<a href
="#" style
="color:blue">修改頭像
</a
>
</td
>
返回頂部
Ⅱ.創建 userUpdate.jsp 修改頁面
這里主要包含以下幾個部分：
- 首先在進入修改界面的時候，會顯示出原有的用戶信息，所以整個頁面的構架和注冊時候的基本一致。
- 在展現之前的用戶信息時需要從數據庫導出對應的信息（用戶名、密碼、性別、年齡、愛好等），基于頁面操作，這里采用javascript(將獲取的值放入value屬性中實現展示)。
- 其中還有一個難點，就是讓具有的愛好在對應的復選框上進行勾選。由于愛好是以字符串的形式傳輸的，所以還是采用分割數組的方式處理，并且在checkHobby()方法中進行復選框勾選處理。獲取當前用戶的愛好數組、以及復選框具有的愛好數組，雙重循環匹配對應，進行勾選checked。
<%@ page
import="java.sql.ResultSet" %>
<%@ page
import="com.zte.dbHelper" %><%--Created by IntelliJ
IDEA.User: 35192Date: 2021/2/18Time: 21:43To change
this template use File
| Settings
| File Templates
.
--%>
<%@ page contentType
="text/html;charset=UTF-8" language
="java" %>
<html
>
<head
><title
>userUpdate
</title
>
</head
><!-- 調用checkHobby()方法實現愛好復選框勾選
-->
<body onload
="checkHobby()"><!-- 利用javascript獲取要修改的用戶信息
-->
<%request
.setCharacterEncoding("UTF-8");String username
= request
.getParameter("username");dbHelper db
= new dbHelper();ResultSet rs
= db
.updataShow(username
);String id
=" ";String sex
=" ";String age
=" ";String hobby
=" ";String pwd
=" ";String phone
= " ";if(rs
.next()) {id
= String
.valueOf(rs
.getInt(1));age
= String
.valueOf(rs
.getInt(4));pwd
= rs
.getString(3);sex
= rs
.getString(5);hobby
= rs
.getString(6);}String newhobby
[] = new String[4];newhobby
= hobby
.split(",");
%><div align
="center"><h1
>用 戶 修 改
</h1
><form action
="/upDateServlet" method
="post"><table
><tr
><td
>序號
</td
><td
><%=id
%></td
></tr
><tr
><td
>用戶名：
</td
><td
><input type
="text" name
="username" readonly value
="<%=username%>"></td
></tr
><tr
><td
>密碼：
</td
><td
><input type
="password" name
="pwd" placeholder
="請輸入密碼" value
="<%=pwd%>"></td
></tr
><tr
><td
>手機號
</td
><td
><input type
="text" name
="phone" placeholder
="請輸入手機號" maxlength
="11" value
="<%=phone%> "></td
></tr
><tr
><td
>性別：
</td
><td
><%if (sex
.equals("男")){%><input type
="radio" name
="sex" value
="男" checked
>男
<input type
="radio" name
="sex" value
="女">女
<%}else{%><input type
="radio" name
="sex" value
="男">男
<input type
="radio" name
="sex" value
="女"checked
>女
<%}%></td
></tr
><tr
><td
>年齡
</td
><td
><input type
="text" name
="age" placeholder
="請輸入年齡" maxlength
="2" value
="<%=age%>"></td
></tr
><tr
><td
>愛好：
</td
><td
><input type
="checkbox" name
="hobby" value
="打游戲">電子競技
<input type
="checkbox" name
="hobby" value
="吃飯">美食鑒賞
<br
><input type
="checkbox" name
="hobby" value
="發呆">思考人生
<input type
="checkbox" name
="hobby" value
="睡覺">養精蓄銳
</td
></tr
><tr align
="center"><td colspan
="2"><input type
="submit" value
="修改"/> 
; 
; 
; 
; 
; 
; 
; 
;<input type
="reset" value
="重填"/></td
></tr
></table
><input type
="text" value
="<%=hobby%>" id
= "oldhobby"></form
>
</div
>
<script type
="text/javascript">function checkHobby() {var hobby
= document
.getElementById("oldhobby").value
; # 利用愛好輸入框進行過度
var newHobby
= hobby
.split(",");var checkHobby
= document
.getElementsByName("hobby")for (var i
=0;i
<newHobby
.length
;i
++){for (var j
=0;j
<checkHobby
.length
;j
++){if (newHobby
[i
] == checkHobby
[j
].value
){checkHobby
[j
].checked
= "checked";}}}}
</script
>
</body
>
</html
>
Ⅲ.完善 dbHelper類，添加用戶修改方法
這里包含了三部分：
- 在進入修改界面的時候，會展示出修改之前的用戶信息
- 實現用戶修改功能的方法
- 在進行用戶信息修改的時候我們對其添加了限制 --- 手機號的前三位，并且保證修改信息中號碼一欄為數字。
public ResultSet updataShow(String username
){try{getConnection();String sql
= "select*from userinfo_copy1 where username=?";preparedStatement
= connection
.prepareStatement(sql
);preparedStatement
.setString(1,username
);resultSet
= preparedStatement
.executeQuery();}catch (Exception e
){e
.printStackTrace();}return resultSet
;
}
public int upData(String username
,String pwd
,int age
,String sex
,String hobby
,String phone
){try {if(isNumeric(phone
) & ( phone
.startsWith("132") | phone
.startsWith("188") | phone
.startsWith("158") ) & phone
.length()==11 ){getConnection();String sql
= "update userinfo_copy1 set pwd=?,age=?,sex=?,hobby=?,phone=? where username=?";preparedStatement
= connection
.prepareStatement(sql
);preparedStatement
.setString(1,pwd
);preparedStatement
.setInt(2,age
);preparedStatement
.setString(3,sex
);preparedStatement
.setString(4,hobby
);preparedStatement
.setString(5,phone
);preparedStatement
.setString(6,username
);int num
=preparedStatement
.executeUpdate();if (num
>0){return 1;}else {return 2;}}else {return 3;}}catch (Exception e
){e
.printStackTrace();return 0;}
}
public static boolean isNumeric(String str
) {Pattern pattern
= Pattern.compile("^(\\-|\\+)?\\d+(\\.\\d+)?$");Matcher isNum
= pattern
.matcher(str
);if (!isNum
.matches()) {return false;}return true;
}
返回頂部
Ⅳ.創建 upDataServlet，實現用戶信息修改功能
import com.zte.dbHelper;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;@WebServlet(name
= "upDateServlet",urlPatterns
= "upDateServlet")
public class upDateServlet
extends HttpServlet {protected void doPost(HttpServletRequest request
, HttpServletResponse response
) throws ServletException, IOException {response
.setContentType("text/html;charset=UTF-8");response
.setCharacterEncoding("UTF-8");request
.setCharacterEncoding("UTF-8");PrintWriter out
= response
.getWriter();String username
= request
.getParameter("username");String pwd
= request
.getParameter("pwd");String sex
= request
.getParameter("sex");int age
= Integer.parseInt(request
.getParameter("age"));String hobby
[] = request
.getParameterValues("hobby");String newHobby
= "";String phone
= request
.getParameter("phone");for(int i
=0;i
<hobby
.length
;i
++){if(i
==hobby
.length
-1){newHobby
+= hobby
[i
];}else{newHobby
+= hobby
[i
] + ",";}}dbHelper db
= new dbHelper();switch (db
.upData(username
,pwd
,age
,sex
,newHobby
,phone
)){case 0:out
.println("<script>");out
.println("alert('系統錯誤');");out
.println("window.location='userUpdata.jsp';");out
.println("</script>");break;case 1:out
.println("<script>");out
.println("alert('修改成功');");out
.println("window.location='userinfo.jsp';");out
.println("</script>");break;case 2:out
.println("<script>");out
.println("alert('修改失敗');");out
.println("window.location='userUpdata.jsp';");out
.println("</script>");break;case 3:out
.println("<script>");out
.println("alert('手機號碼格式不正確！');");out
.println("window.location='userinfo.jsp';");out
.println("</script>");break;}out
.flush();out
.close();}protected void doGet(HttpServletRequest request
, HttpServletResponse response
) throws ServletException, IOException {doPost(request
,response
);}
}
返回頂部
Ⅴ.效果展示
修改前：
修改后：
返回頂部
上一篇：用戶信息界面操作 ---- 刪除
總結
以上是生活随笔為你收集整理的【JSP】用户信息界面操作 ---- 用户信息修改的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
