添加功能---jsp,servlet
生活随笔
收集整理的這篇文章主要介紹了
添加功能---jsp,servlet
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
接上篇：>>>列表查詢，添加功能---JSP，servlet_籠中鳥-CSDN博客
一.jsp之間的跳轉(zhuǎn)
list.jsp >>
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE html> <!-- 網(wǎng)頁(yè)使用的語(yǔ)言 --> <html lang="zh-CN"> <head><!-- 指定字符集 --><meta charset="utf-8"><!-- 使用Edge最新的瀏覽器的渲染方式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- viewport視口：網(wǎng)頁(yè)可以根據(jù)設(shè)置的寬度自動(dòng)進(jìn)行適配，在瀏覽器的內(nèi)部虛擬一個(gè)容器，容器的寬度與設(shè)備的寬度相同。width: 默認(rèn)寬度與設(shè)備的寬度相同initial-scale: 初始的縮放比，為1:1 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ --><title>用戶信息管理系統(tǒng)</title><!-- 1. 導(dǎo)入CSS的全局樣式 --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- 2. jQuery導(dǎo)入，建議使用1.9以上的版本 --><script src="js/jquery-2.1.0.min.js"></script><!-- 3. 導(dǎo)入bootstrap的js文件 --><script src="js/bootstrap.min.js"></script><style type="text/css">td, th {text-align: center;}</style><script type="text/javascript">function deluser(i) {//用戶安全提示if(confirm("您確定需要?jiǎng)h除嗎?")){location.href="${pageContext.request.contextPath }/delUserServlet?id="+i;}}window.onload=function(){//給刪除選中按鈕添加點(diǎn)擊事件document.getElementById("delselcted").onclick=function(){if(confirm("您確定刪除這些選項(xiàng)嗎？")){ //在刪除前給刪除添加保險(xiǎn)//判斷選項(xiàng)中是否有被選上的，如果沒有的話不執(zhí)行刪除，否則沒有if會(huì)造成空指針異常var flag =false;var cbs=document.getElementsByName("uid"); //獲取所有的選項(xiàng)（包括選的，沒有選的）for(var i=0;i<cbs.length;i++){if(cbs[i].checked){ //一旦有被選的項(xiàng)，就停止循環(huán)flag=true;break; }}if(flag){//一旦有被選的項(xiàng)，就提交表單document.getElementById("form").submit(); //一旦刪除選中，首先創(chuàng)建一個(gè)表單，把所有信息提交給delselectedservlet處理}}}//一鍵全選，一鍵全不選//通過id獲取第一個(gè)全選項(xiàng)document.getElementById("firstcb").onclick=function(){var cbs=document.getElementsByName("uid");//遍歷下面所有的選項(xiàng)for(var i=0;i<cbs.length;i++){//設(shè)置cbs[i].checked的狀態(tài)與第一個(gè)firstcb.checked相同cbs[i].checked=this.checked;}}; }</script> </head> <body> <div class="container"><h3 style="text-align: center">用戶信息列表</h3><div style="float: left;"><form class="form-inline"><div class="form-group"><label for="exampleInputName2">姓名</label><input type="text" class="form-control" id="exampleInputName2" ></div><div class="form-group"><label for="exampleInputName3">籍貫</label><input type="text" class="form-control" id="exampleInputName3" ></div><div class="form-group"><label for="exampleInputEmail2">郵箱</label><input type="email" class="form-control" id="exampleInputEmail2" ></div><button type="submit" class="btn btn-default">查詢</button></form></div><div style="float: right; margin: 5px;"> <a class="btn btn-primary" href="${pageContext.request.contextPath }/add.jsp">添加聯(lián)系人</a><a class="btn btn-primary" href="javascript:void(0);" id="delselcted">刪除選中</a> </div><%--下面這個(gè)form表單是為了提交所有選擇的刪除項(xiàng) 至delselectedservlet至于delselectedservlet怎么獲得那個(gè)項(xiàng)被選中，可以首先設(shè)置表單提交，然后將input中checkbox欄，設(shè)name="id"使之該id的value=${user.id},最后通過表單提交給了delselectedservlet--%><form action="${pageContext.request.contextPath }/delselectedservlet" id="form" method="post"><table border="1" class="table table-bordered table-hover"><tr class="success"><th><input type="checkbox" id="firstcb"></th><th>編號(hào)</th><th>姓名</th><th>性別</th><th>年齡</th><th>籍貫</th><th>QQ</th><th>郵箱</th><th>操作</th></tr><c:forEach items="${list}" var="user" varStatus="s"><tr><td><input type="checkbox" name="uid" value="${user.id}"></td><td>${s.count}</td><td>${user.name}</td><td>${user.gender }</td><td>${user.age }</td><td>${user.address }</td><td>${user.qq }</td><td>${user.email }</td><td><a class="btn btn-default btn-sm" href="${pageContext.request.contextPath }/queryupdate?id=${user.id}">修改</a> <a class="btn btn-default btn-sm"href="javascript:deluser(${user.id});" >刪除</a></td></tr></c:forEach></table></form><div><nav aria-label="Page navigation"><ul class="pagination"><li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li><span style="font-size: 25px;margin-left: 5px;">共16條記錄，共4頁(yè)</span></ul></nav></div> </div> </body> </html>由上list.jsp可以看出，我們一旦點(diǎn)擊添加聯(lián)系人按鈕，就會(huì)跳轉(zhuǎn)到add.jsp頁(yè)面（其中${pageContext.request.contextPath }是資源的虛擬路徑）
add.jsp 如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <!DOCTYPE html> <html lang="zh-CN"> <head><!-- 指定字符集 --><meta charset="utf-8"><!-- 使用Edge最新的瀏覽器的渲染方式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- viewport視口：網(wǎng)頁(yè)可以根據(jù)設(shè)置的寬度自動(dòng)進(jìn)行適配，在瀏覽器的內(nèi)部虛擬一個(gè)容器，容器的寬度與設(shè)備的寬度相同。width: 默認(rèn)寬度與設(shè)備的寬度相同initial-scale: 初始的縮放比，為1:1 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ --><title>添加用戶</title><!-- 1. 導(dǎo)入CSS的全局樣式 --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- 2. jQuery導(dǎo)入，建議使用1.9以上的版本 --><script src="js/jquery-2.1.0.min.js"></script><!-- 3. 導(dǎo)入bootstrap的js文件 --><script src="js/bootstrap.min.js"></script><script language=javascript>//在添加頁(yè)面時(shí)返回查詢用戶頁(yè)面的按鈕window.onload=function(){document.getElementById("return").onclick=function(){location.href="${pageContext.request.contextPath }/userListServlet";}} //驗(yàn)證只能為數(shù)字function checkNumber(obj){var reg = /^[0-9]+$/;if(obj!=""&&!reg.test(obj)){alert('只能輸入數(shù)字！');return false;}}//驗(yàn)證年齡function checkAge(obj){var reg = /^[0-9]+$/;if((obj!=""&&!reg.test(obj))||(obj>120)){alert('只能輸入小于120的數(shù)字！');return false;}}//驗(yàn)證郵箱function checkEmail(obj){//對(duì)電子郵件的驗(yàn)證var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;if(!myreg.test(obj)){alert('請(qǐng)輸入有效的郵箱！');return false;}}</script> </head> <body> <div class="container"><center><h3>添加聯(lián)系人頁(yè)面</h3></center><form action="${pageContext.request.contextPath }/addUserServlet" method="post"><div class="form-group"><label for="name">姓名：</label><input type="text" class="form-control" id="name" name="name" placeholder="請(qǐng)輸入姓名"></div><div class="form-group"><label>性別：</label><input type="radio" name="gender" value="男" checked="checked"/>男<input type="radio" name="gender" value="女"/>女</div><div class="form-group"><label for="age">年齡：</label><input type="text" class="form-control" id="age" name="age" onkeypress="checkAge(this.value)" placeholder="請(qǐng)輸入年齡"></div><div class="form-group"><label for="address">籍貫：</label><select name="address" class="form-control" id="jiguan"><option value="廣東">廣東</option><option value="廣西">廣西</option><option value="湖南">湖南</option><option value="北京">北京</option><option value="湖北">湖北</option><option value="江西">江西</option><option value="遼寧">遼寧</option><option value="吉林">吉林</option><option value="黑龍江">黑龍江</option><option value="河南">河南</option><option value="河北">河北</option><option value="新疆">新疆</option><option value="內(nèi)蒙古">內(nèi)蒙古</option><option value="西藏">西藏</option><option value="浙江">浙江</option><option value="江蘇">江蘇</option></select></div><div class="form-group"><label for="qq">QQ：</label><input type="text" class="form-control" name="qq" id="qq" onkeyup="checkNumber(this.value)" placeholder="請(qǐng)輸入QQ號(hào)碼"/></div><div class="form-group"><label for="email">Email：</label><input type="text" class="form-control" name="email" id="email" onblur="checkEmail(this.value)" placeholder="請(qǐng)輸入郵箱地址"/></div><div class="form-group" style="text-align: center"><input class="btn btn-primary" type="submit" value="提交" /><input class="btn btn-default" type="reset" value="重置" /><input class="btn btn-default" type="button" value="返回" /></div></form> </div> </body> </html>由上面add.jsp中可以看出，當(dāng)用戶填完信息后，點(diǎn)擊提交按鈕，就會(huì)把表單的信息提交給AddUserServlet來處理
二.編寫AddUserServlet類
作用：用來處理表單提交的請(qǐng)求
1.設(shè)置編碼
2.使用beanutils封裝用戶傳來的信息
3.調(diào)用sercice層 添加方法
4.添加成功后跳轉(zhuǎn)查詢所有的用戶jsp頁(yè)面
? ??req.getContextPath()+"/userListServlet"
package web.servlet;import java.io.IOException; import java.lang.reflect.InvocationTargetException; import java.util.Map;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 org.apache.commons.beanutils.BeanUtils;import domain.User; import service.USerService; import service.UserServiceImpl; @WebServlet("/addUserServlet") public class AddUserServlet extends HttpServlet{/*** */private static final long serialVersionUID = 1L;@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// TODO Auto-generated method stubthis.doPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//1.設(shè)置編碼req.setCharacterEncoding("utf-8");User user=new User();//2.使用beanutils封裝用戶傳來的信息Map<String ,String[]> pMap=req.getParameterMap();try {BeanUtils.populate(user, pMap);} catch (IllegalAccessException | InvocationTargetException e) {// TODO Auto-generated catch blocke.printStackTrace();}//3.調(diào)用sercice層的方法USerService uSerService=new UserServiceImpl();uSerService.addUser(user);//4.跳轉(zhuǎn)jsp頁(yè)面resp.sendRedirect(req.getContextPath()+"/userListServlet"); } }三.在service層中的UserService接口，UserServiceImpl實(shí)現(xiàn)類分別編寫addUser抽象方法和addUser具體實(shí)現(xiàn)方法。
package service; //user的業(yè)務(wù)接口import java.util.List;import domain.User;public interface USerService {//定義業(yè)務(wù)查詢抽象方法public List<User> findAll();public void addUser(User user);public void deluser(String id);public User findUserById(String idString);public void updateuser(User user);public void delselecteduser(String[] ids);} package service;import java.util.List;import dao.UserDao; import dao.UserDaoImpl; import domain.User;public class UserServiceImpl implements USerService{UserDao userDao=new UserDaoImpl();@Overridepublic List<User> findAll() {//調(diào)用dao,操作數(shù)據(jù)庫(kù)return userDao.findAll();}public void addUser(User user) {//調(diào)用添加用戶的方法userDao.addUser(user);}public void deluser(String id) {//刪除用戶信息userDao.deluser(Integer.parseInt(id)); //將參數(shù)變?yōu)檎麛?shù)}@Overridepublic User findUserById(String idString) {//通過id來查詢需要修改的用戶信息 return userDao.findUserById(Integer.parseInt(idString)); }@Overridepublic void updateuser(User user) {// 根據(jù)update.jsp中的用戶信息修改數(shù)據(jù)庫(kù)的用戶信息userDao.updateuser(user); }@Overridepublic void delselecteduser(String[] ids) {if(ids!=null&&ids.length>0) { //判斷是否有用戶被選中，防止空指針異常//根據(jù)id數(shù)組，刪除選中的用戶for(String id:ids) {//遍歷數(shù)組userDao.deluser(Integer.parseInt(id)); //參數(shù)轉(zhuǎn)換integer}} }}四.在Dao層中UserDao接口，UserDaoImpl實(shí)現(xiàn)類分別編寫addUser抽象方法和addUser具體實(shí)現(xiàn)方法。
package dao;import java.util.List;import domain.User;public interface UserDao {public List<User> findAll(); //抽象方法public void addUser(User user);public void deluser(int id); //根據(jù)整型的id來刪除用戶public User findUserById(int parseInt);public void updateuser(User user);} package dao;import java.util.List;import javax.xml.transform.Templates;import org.springframework.jdbc.core.BeanPropertyRowMapper; import org.springframework.jdbc.core.JdbcTemplate;import domain.LoginUser; import domain.User; import utils.JDBCUtils;public class UserDaoImpl implements UserDao{JdbcTemplate jdbcTemplate =new JdbcTemplate(JDBCUtils.getDataSource());public List<User> findAll() {// 操作數(shù)據(jù)庫(kù),查詢String sql="select * from user";List<User> users=jdbcTemplate.query(sql,new BeanPropertyRowMapper(User.class));return users;}public LoginUser checkLoginUser( LoginUser loginUser) {//查詢登錄用戶信息String sqlString="select* from loginuser where username=? and password=?";//System.out.println("111"+loginUser);try {LoginUser lu=(LoginUser) jdbcTemplate.queryForObject(sqlString, new BeanPropertyRowMapper<LoginUser>(LoginUser.class),loginUser.getUserName(),loginUser.getPassword());return lu;} catch (Exception e) {// TODO: handle exceptione.printStackTrace();return null;} }public void addUser(User user) {//調(diào)用添加用戶的方法，//使用sql語(yǔ)句String sql="insert into user values(null,?,?,?,?,?,?)";jdbcTemplate.update(sql,user.getName(),user.getGender(),user.getAge(),user.getAddress(),user.getQq(),user.getEmail());}@Overridepublic void deluser(int id) {//刪除用戶信息String sql="delete from user where id=?";jdbcTemplate.update(sql,id);}@Overridepublic User findUserById(int parseInt) {//根據(jù)id查詢用戶的信息String sql="select * from user where id=?";User user=jdbcTemplate.queryForObject(sql,new BeanPropertyRowMapper<User>(User.class),parseInt);return user; }@Overridepublic void updateuser(User user) {// 根據(jù)update.jsp中的用戶信息修改數(shù)據(jù)庫(kù)的用戶信息String sql="update user set name=?,gender=?,age=?,address=?,qq=?,email=? where id=?";jdbcTemplate.update(sql,user.getName(),user.getGender(),user.getAge(),user.getAddress(),user.getQq(),user.getEmail(),user.getId()); }}五.添加成功后，重新跳轉(zhuǎn)到查詢所有用戶的頁(yè)面
? ? ?resp.sendRedirect(req.getContextPath()+"/userListServlet");? （在步驟2中最后重新跳回到查詢所有的servlet）
其他：
在jsp中表單中增加了表單驗(yàn)證功能以及頁(yè)面返回的功能。
詳細(xì)更多表單驗(yàn)證功能參考：JS常用的表單驗(yàn)證（數(shù)字、長(zhǎng)度,漢字，郵箱，手機(jī)號(hào)，身份證等）_籠中鳥-CSDN博客
<script language=javascript>//在添加頁(yè)面時(shí)返回查詢用戶頁(yè)面的按鈕window.onload=function(){document.getElementById("return").onclick=function(){location.href="${pageContext.request.contextPath }/userListServlet";}}//驗(yàn)證只能為數(shù)字function checkNumber(obj){var reg = /^[0-9]+$/;if(obj!=""&&!reg.test(obj)){alert('只能輸入數(shù)字！');return false;}}//驗(yàn)證年齡function checkAge(obj){var reg = /^[0-9]+$/;if((obj!=""&&!reg.test(obj))||(obj>120)){alert('只能輸入小于120的數(shù)字！');return false;}}//驗(yàn)證郵箱function checkEmail(obj){//對(duì)電子郵件的驗(yàn)證var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;if(!myreg.test(obj)){alert('請(qǐng)輸入有效的郵箱！');return false;}}</script>總結(jié)
以上是生活随笔為你收集整理的添加功能---jsp,servlet的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 列表查询，添加功能---JSP，serv
- 下一篇： 修改记录功能--jsp,servlet