web實現增刪改查的方式有很多啊,對於初學者來說當然是要先了解各部分的傳值的方式.本篇博客從jsp技術的最基礎方面進行說明.
一、什么是jsp技術
首先,我們要了解什么是jsp技術.
jsp技術是基於JAVA語言的動態網頁技術,通常使用HTML語言來設計和格式化靜態頁面內容,然后通過jsp標簽來實現動態部分,也就是數據間的互交.在這里推薦一篇博客來供初學者進行學習.
二、代碼實現
1.創建數據庫表
創建一下數據庫表,數據庫名Student,表名student.
2.創建web項目,項目名為Student並建立以下jsp頁面
1)主頁面 index.jsp
1 <%@ page language="java" import="java.sql.*" pageEncoding="utf-8"%> 2 <%@ page errorPage="error.jsp"%> 3 <html> 4 <head> 5 <title>學生管理系統</title> 6 <link rel="stylesheet" type="text/css" href="css/style.css"> 7 </head> 8 <body> 9 <div align="center"> 10 <p>學生管理系統</p> 11 <a href="add.jsp">添加學生信息</a> <br /> <br /> 12 <table style="width: 50%;"> 13 <tr> 14 <th>學號</th> 15 <th>姓名</th> 16 <th>性別</th> 17 <th>出生日期</th> 18 <th>家庭住址</th> 19 <th>操 作</th> 20 </tr> 21 <% 22 try { 23 Class.forName("com.mysql.jdbc.Driver"); 24 Connection con = DriverManager.getConnection( 25 "jdbc:mysql://localhost:3306/student?useUnicode=true&characterEncoding=utf-8", "root", 26 "root"); 27 //使用Statement對象 28 Statement stmt = con.createStatement(); 29 String s = "select * from student"; 30 ResultSet rs = stmt.executeQuery(s); 31 32 while (rs.next()) { 33 int id = rs.getInt(1); 34 out.println("<tr><td>" + rs.getString(1) + "</td><td>" + rs.getString(2) + "</td><td>" 35 + rs.getString(3) + "</td><td>" + rs.getString(4) + "</td><td>" + rs.getString(5) 36 + "</td><td><a href='edit.jsp?id=" + id 37 + "'>修改</a> <a onclick='check()' href='del.jsp?id=" + id + "'>刪除</a></td></tr>"); 38 } 39 rs.close(); 40 stmt.close(); 41 con.close(); 42 } catch (Exception e) { 43 out.println("Exception:" + e.getMessage()); 44 } 45 %> 46 47 </table> 48 <br /> 49 </div> 50 <script> 51 function check() { 52 if (confirm("確認執行此操作嗎？")) { 53 return true; 54 } else { 55 return false; 56 } 57 } 58 </script> 59 </body> 60 </html>
這里采用JDBC來連接數據庫,並指定字符編碼與解碼方式為utf-8.並通過遍歷表student的數據將每一行的每一列數據依次out.printf輸出到table中.設計修改、操作的操作按鈕傳值id進行相應操作.
其中,script中為javascript腳本語言,用來限制刪除的操作,防止用戶誤刪.
2)添加操作
add.jsp
1 <%@ page contentType="text/html; charset=utf-8" import="java.sql.*" 2 errorPage="error.jsp"%> 3 <html> 4 <head> 5 <title>添學生信息</title> 6 <link rel="stylesheet" type="text/css" href="css/style.css"> 7 </head> 8 <body> 9 <div align="center"> 10 <p>添加成員信息</p> 11 <form action="addsave.jsp" method="post"> 12 <table style="width: 50%"> 13 <tr> 14 <th width="50%">學號：</th> 15 <td width="50%"><input name="id" type="text" required 16 oninvalid="setCustomValidity('學號是必填項')" 17 oninput="setCustomValidity('')"></td> 18 </tr> 19 <tr> 20 <th>姓名：</th> 21 <td><input name="name" type="text" required 22 oninvalid="setCustomValidity('姓名是必填項')" 23 oninput="setCustomValidity('')"></td> 24 </tr> 25 <tr> 26 <th>性別：</th> 27 <td><select name="sex"> 28 <option value="男">男</option> 29 <option value="女">女</option> 30 </select></td> 31 </tr> 32 <tr> 33 <th>出生日期：</th> 34 <td><input name="birthday" type="text" required 35 oninvalid="setCustomValidity('出生日期是必填項')" 36 oninput="setCustomValidity('')"></td> 37 </tr> 38 <tr> 39 <th>家庭住址：</th> 40 <td><input name="address" type="text" required 41 oninvalid="setCustomValidity('家庭居住地址是必填項')" 42 oninput="setCustomValidity('')"></td> 43 </tr> 44 </table> 45 <button type="submit" name="submit" value="添加">添 加</button> 46 <button type="reset" value="重置">重 置</button> 47 </form> 48 </div> 49 </body> 50 </html>
設計添加頁面,通過form表單傳值到addsave.jsp
addsave.jsp
addsave.jsp進行數據的獲取並將數據添加到數據庫.因為傳值的時候是以String的形式傳輸的,所以對於id要進行類型轉換 1 int id = Integer.parseInt(request.getParameter("id")); .
1 <%@ page contentType="text/html; charset=utf-8" import="java.sql.*" 2 errorPage="error.jsp"%> 3 <html> 4 <head> 5 <title>添加學生信息</title> 6 <link rel="stylesheet" type="text/css" href="css/style.css"> 7 </head> 8 <body> 9 <% 10 request.setCharacterEncoding("utf-8"); 11 String submit = request.getParameter("submit"); 12 13 int id = Integer.parseInt(request.getParameter("id")); 14 String name = request.getParameter("name"); 15 String sex = request.getParameter("sex"); 16 String birthday = request.getParameter("birthday"); 17 String address = request.getParameter("address"); 18 Class.forName("com.mysql.jdbc.Driver"); 19 Connection con = DriverManager.getConnection( 20 "jdbc:mysql://localhost:3306/student?useUnicode=true&characterEncoding=utf-8", "root", "root"); 21 //使用Statement對象 22 Statement stmt = con.createStatement(); 23 String sql = "insert into student(id,name,sex,birthday,address) values('" + id + "','" + name + "','" + sex 24 + "','" + birthday + "'," + address + ")"; 25 int i = stmt.executeUpdate(sql); 26 27 if (i == 1) { 28 %> 29 30 <script type="text/javascript"> 31 alert("學生信息添加成功"); 32 window.location.href = "index.jsp"; 33 </script> 34 <% 35 } else { 36 %> 37 <script type="text/javascript"> 38 alert("學生信息添加失敗"); 39 window.location.href = "index.jsp"; 40 </script> 41 <% 42 } 43 stmt.close(); 44 con.close(); 45 %> 46 </body> 47 </html>
3)修改操作
edit.jsp
1 <%@ page import="java.sql.*" pageEncoding="utf-8" errorPage="error.jsp"%> 2 <html> 3 <head> 4 <title>修改學生信息</title> 5 <link rel="stylesheet" type="text/css" href="css/style.css"> 6 </head> 7 <body> 8 <% 9 request.setCharacterEncoding("utf-8"); 10 Class.forName("com.mysql.jdbc.Driver"); 11 Connection con = DriverManager.getConnection( 12 "jdbc:mysql://localhost:3306/student?useUnicode=true&characterEncoding=utf-8", "root", "20173673"); 13 Statement stmt = con.createStatement(); 14 String id = request.getParameter("id"); 15 ResultSet rs = stmt.executeQuery("select * from student where id=" + id); 16 rs.next(); 17 %> 18 <div align="center"> 19 <form action="editsave.jsp" method="post"> 20 <h2>修改學生信息</h2> 21 <table style="width: 50%"> 22 <tr> 23 <th width="50%">學號：</th> 24 <td width="50%"><input name="id" type="text" 25 value="<%=rs.getString(1)%>" disabled="disabled"></td> 26 </tr> 27 <tr> 28 <th>姓名：</th> 29 <td><input name="name" type="text" 30 value="<%=rs.getString(2)%>"></td> 31 </tr> 32 <tr> 33 <th>性別：</th> 34 <td><select name="sex"> 35 <option value="<%=rs.getString(3)%>"><%=rs.getString(3)%> 36 <option value="男">男</option> 37 <option value="女">女</option> 38 </select> 39 </tr> 40 <tr> 41 <th>出生日期：</th> 42 <td><input name="birthday" type="text" 43 value="<%=rs.getString(4)%>"></td> 44 </tr> 45 <tr> 46 <th>家庭住址：</th> 47 <td><input name="address" type="text" 48 value="<%=rs.getString(5)%>"></td> 49 </tr> 50 </table> 51 <input type="hidden" name="id" value="<%=id%>"> 52 <button type="submit" name="submit" value="修改">修 改</button> 53 <button type="reset" value="重置">重 置</button> 54 </form> 55 </div> 56 <% 57 rs.close(); 58 stmt.close(); 59 con.close(); 60 %> 61 62 </body> 63 </html>
通過id獲取要修改的內容,顯示到table的input輸入框中,進行修改.然后將值傳輸到editsave.jsp中,進行信息修改的操作.
editsave.jsp
1 <%@ page import="java.sql.*" pageEncoding="utf-8" errorPage="error.jsp"%> 2 <html> 3 <head> 4 <title>修改完成</title> 5 <link rel="stylesheet" type="text/css" href="css/style.css"> 6 </head> 7 <body> 8 <% 9 request.setCharacterEncoding("utf-8"); 10 int id = Integer.parseInt(request.getParameter("id")); 11 String name = request.getParameter("name"); 12 String sex = request.getParameter("sex"); 13 String birthday = request.getParameter("birthday"); 14 String address = request.getParameter("address"); 15 Class.forName("com.mysql.jdbc.Driver"); 16 Connection con = DriverManager.getConnection( 17 "jdbc:mysql://localhost:3306/student?useUnicode=true&characterEncoding=utf-8", "root", "root"); 18 Statement stmt = con.createStatement(); 19 String sql = "update student set id = '" + id + "',name='" + name + "',sex = '" + sex + "',birthday='" 20 + birthday + "', address = '" + address + "'where id=" + id; 21 22 int i = stmt.executeUpdate(sql); 23 if (i == 1) { 24 %> 25 26 <script type="text/javascript"> 27 alert("信息修改成功"); 28 window.location.href = "index.jsp"; 29 </script> 30 <% 31 } else { 32 %> 33 <script type="text/javascript"> 34 alert("信息修改失敗"); 35 window.location.href = 'edit.jsp?id=' 36 " + id + "; 37 </script> 38 39 <% 40 } 41 stmt.close(); 42 con.close(); 43 %> 44 </body> 45 </html>
4)刪除操作
delete.jsp
1 <%@ page contentType="text/html; charset=gbk" language="java" 2 import="java.sql.*" pageEncoding="utf-8"%> 3 <html> 4 <head> 5 <title>刪除學生信息</title> 6 <link rel="stylesheet" type="text/css" href="css/style.css"> 7 </head> 8 <body> 9 <% 10 request.setCharacterEncoding("gbk"); 11 Class.forName("com.mysql.jdbc.Driver"); 12 Connection con = DriverManager.getConnection( 13 "jdbc:mysql://localhost:3306/student?useUnicode=true&characterEncoding=utf-8", "root", "root"); 14 Statement stmt = con.createStatement(); 15 String id = request.getParameter("id"); 16 int i = stmt.executeUpdate("delete from student where id=" + id); 17 if (i == 1) { 18 %> 19 <script type="text/javascript"> 20 alert("學生信息刪除成功!"); 21 window.location.href = "index.jsp"; 22 </script> 23 <% 24 } else { 25 %> 26 <script type="text/javascript"> 27 alert("學生信息刪除失敗"); 28 window.location.href = "index.jsp"; 29 </script> 30 <% 31 } 32 con.close(); 33 stmt.close(); 34 %> 35 </body> 36 </html>
三、效果截圖
index
add
edit
大體就是這樣啦,有什么不對的希望大家多多指正.