JQuery技术实现的小窗口
编程目的：
通过一次web实验，我了解到了JQuery技术的强大。
JQuery技术我们可以精简我们的代码，应用一个页面便可以实现之前三四个1页面才能完成的功能。而且JQuery技术实现的小窗口更加方便。
下面是利用JQuery技术设计的一个简易的学生信息管理
贴上小窗口的运行截图以及实现代码
运行截图：
程序代码：
后端：
package com.bean; public class Student { private int sno; private String name; private String gender; private String birthday; private String address; public int getSno() { return sno; } public void setSno(int sno) { this.sno = sno; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getGender() { return gender; } public void setGender(String gender) { this.gender = gender; } public String getBirthday() { return birthday; } public void setBirthday(String birthday) { this.birthday = birthday; } public String getAddress() { return address; } public void setIncome(String address) { this.address = address; } public Student(int sno,String name,String gender,String birthday,String address) { this.sno=sno; this.name=name; this.gender=gender; this.birthday=birthday; this.address=address; } }
package com.conn; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; public class DBUtil { public static String db_url = "jdbc:mysql://localhost/mytest?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC"; public static String db_user = "root";//账号 public static String db_pass = "123456";//密码 public static Connection getConn () { Connection conn = null; try { Class.forName("com.mysql.cj.jdbc.Driver"); conn = DriverManager.getConnection(db_url, db_user, db_pass); } catch (Exception e) { e.printStackTrace(); } return conn; } public static void close (Statement state, Connection conn) { if (state != null) { try { state.close(); } catch (SQLException e) { e.printStackTrace(); } } if (conn != null) { try { conn.close(); } catch (SQLException e) { e.printStackTrace(); } } } public static void close (ResultSet rs, Statement state, Connection conn) { if (rs != null) { try { rs.close(); } catch (SQLException e) { e.printStackTrace(); } } if (state != null) { try { state.close(); } catch (SQLException e) { e.printStackTrace(); } } if (conn != null) { try { conn.close(); } catch (SQLException e) { e.printStackTrace(); } } } }
package com.dao; import com.bean.*; import java.sql.Connection; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; import java.util.ArrayList; import java.util.List; import com.conn.DBUtil; import com.bean.Student; public class Dao { public boolean add(Student student) { String sql = "insert into student(sno,name,gender,birthday,address) values('"+student.getSno()+"','"+student.getName()+"','"+student.getGender()+"','"+student.getBirthday()+"','"+student.getAddress()+"')"; Connection conn = DBUtil.getConn();//调用方法连接数据库 Statement state = null; boolean f = false; int a = 0 ; try { //监视大括号内的代码 state = conn.createStatement(); a = state.executeUpdate(sql); } catch (Exception e) { //捕获错误 e.printStackTrace(); } finally { //关闭z 连接 DBUtil.close(state, conn); } if (a > 0) { f = true; } return f; } public Student getStudent(int sno) { String sql = "select * from student where sno ='" + sno + "'"; Connection conn = DBUtil.getConn(); Statement state = null; ResultSet rs = null; Student student = null; try { state = conn.createStatement(); rs = state.executeQuery(sql); while (rs.next()) { String name = rs.getString("name"); String gender = rs.getString("gender"); String birthday = rs.getString("birthday"); String address = rs.getString("address"); student = new Student(sno, name, gender, birthday,address); } } catch (Exception e) { e.printStackTrace(); } finally { DBUtil.close(rs, state, conn); } return student; } public List<Student> getall() { String sql = "select * from student"; List<Student> list = new ArrayList<>(); Connection conn = DBUtil.getConn(); Statement state = null; ResultSet rs = null; try { state = conn.createStatement(); rs = state.executeQuery(sql); Student student = null; while (rs.next()) { int sno = rs.getInt("sno"); String name = rs.getString("name"); String gender = rs.getString("gender"); String birthday = rs.getString("birthday"); String address = rs.getString("address"); student = new Student(sno, name, gender, birthday,address); list.add(student); } } catch (SQLException e) { e.printStackTrace(); } finally { DBUtil.close(rs, state, conn); } return list; } public boolean delete (int sno) { boolean f = false; String sql = "delete from student where sno='" + sno + "'"; Connection conn = DBUtil.getConn(); Statement state = null; int a = 0; try { state = conn.createStatement(); a = state.executeUpdate(sql); } catch (SQLException e) { e.printStackTrace(); } finally { DBUtil.close(state, conn); } if (a > 0) { f = true; } return f; } public boolean update(Student student) { String sql = "update student set sno='" + student.getSno() + "', name='" + student.getName() + "',gender='" + student.getGender() + "',birthday='"+student.getBirthday()+"',address='"+student.getAddress() + "'"; Connection conn = DBUtil.getConn(); Statement state = null; boolean f = false; int a = 0; try { state = conn.createStatement(); a = state.executeUpdate(sql); } catch (SQLException e) { e.printStackTrace(); } finally { DBUtil.close(state, conn); } if (a > 0) { f = true; } return f; } }
package com.servlet; import java.io.IOException; 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 com.bean.Student; import com.dao.Dao; @WebServlet("/AddServlet") public class AddServlet extends HttpServlet { // 添加数据 private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doPost(req, resp); } protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("utf-8"); String str = req.getParameter("sno"); int sno = Integer.parseInt(str); String name = req.getParameter("name"); String gender= req.getParameter("gender"); String birthday= req.getParameter("birthday"); String address = req.getParameter("address"); System.out.println(sno); System.out.println(name); System.out.println(gender); System.out.println(birthday); System.out.println(address); Student student = new Student(sno,name,gender,birthday,address); Dao dao = new Dao(); dao.add(student); resp.getWriter().print(1); req.getRequestDispatcher("ShowServlet").forward(req, resp); } }
package com.dao; import com.bean.*; import java.sql.Connection; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; import java.util.ArrayList; import java.util.List; import com.conn.DBUtil; import com.bean.Student; public class Dao { public boolean add(Student student) { String sql = "insert into student(sno,name,gender,birthday,address) values('"+student.getSno()+"','"+student.getName()+"','"+student.getGender()+"','"+student.getBirthday()+"','"+student.getAddress()+"')"; Connection conn = DBUtil.getConn();//调用方法连接数据库 Statement state = null; boolean f = false; int a = 0 ; try { //监视大括号内的代码 state = conn.createStatement(); a = state.executeUpdate(sql); } catch (Exception e) { //捕获错误 e.printStackTrace(); } finally { //关闭z 连接 DBUtil.close(state, conn); } if (a > 0) { f = true; } return f; } public Student getStudent(int sno) { String sql = "select * from student where sno ='" + sno + "'"; Connection conn = DBUtil.getConn(); Statement state = null; ResultSet rs = null; Student student = null; try { state = conn.createStatement(); rs = state.executeQuery(sql); while (rs.next()) { String name = rs.getString("name"); String gender = rs.getString("gender"); String birthday = rs.getString("birthday"); String address = rs.getString("address"); student = new Student(sno, name, gender, birthday,address); } } catch (Exception e) { e.printStackTrace(); } finally { DBUtil.close(rs, state, conn); } return student; } public List<Student> getall() { String sql = "select * from student"; List<Student> list = new ArrayList<>(); Connection conn = DBUtil.getConn(); Statement state = null; ResultSet rs = null; try { state = conn.createStatement(); rs = state.executeQuery(sql); Student student = null; while (rs.next()) { int sno = rs.getInt("sno"); String name = rs.getString("name"); String gender = rs.getString("gender"); String birthday = rs.getString("birthday"); String address = rs.getString("address"); student = new Student(sno, name, gender, birthday,address); list.add(student); } } catch (SQLException e) { e.printStackTrace(); } finally { DBUtil.close(rs, state, conn); } return list; } public boolean delete (int sno) { boolean f = false; String sql = "delete from student where sno='" + sno + "'"; Connection conn = DBUtil.getConn(); Statement state = null; int a = 0; try { state = conn.createStatement(); a = state.executeUpdate(sql); } catch (SQLException e) { e.printStackTrace(); } finally { DBUtil.close(state, conn); } if (a > 0) { f = true; } return f; } public boolean update(Student student) { String sql = "update student set sno='" + student.getSno() + "', name='" + student.getName() + "',gender='" + student.getGender() + "',birthday='"+student.getBirthday()+"',address='"+student.getAddress() + "'"; Connection conn = DBUtil.getConn(); Statement state = null; boolean f = false; int a = 0; try { state = conn.createStatement(); a = state.executeUpdate(sql); } catch (SQLException e) { e.printStackTrace(); } finally { DBUtil.close(state, conn); } if (a > 0) { f = true; } return f; } }
package com.servlet; import java.io.IOException; import java.util.List; 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 javax.servlet.http.HttpSession; import com.bean.Student; import com.dao.Dao; import com.google.gson.Gson; @WebServlet("/ShowServlet") public class ShowServlet extends HttpServlet { // 显示全部数据 private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doPost(req, resp); } protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("utf-8"); resp.setContentType("text/xml; charset=UTF-8"); Dao dao = new Dao(); List<Student> list = dao.getall(); Gson gson = new Gson(); String json = gson.toJson(list); System.out.println(json); resp.getWriter().write(json); } }
package com.servlet; import java.io.IOException; 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 com.dao.Dao; @WebServlet("/DeleteServlet") public class DeleteServlet extends HttpServlet { // 删除数据 private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doPost(req, resp); } protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String str = req.getParameter("sno"); System.out.println(str); if (str != null && !str.equals("")) { int sno = Integer.valueOf(str); Dao dao = new Dao(); dao.delete(sno); System.out.println(sno); } resp.getWriter().print(1); } }
前端：
<html> <head> <title>信息管理系统</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/jquery-ui.css"> <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script> <script type="text/javascript" src="js/jquery-ui.js"></script> <script type="text/javascript"> //通过AJAX方式检索所有的图书 function RetrieveBooks() { $.post("ShowServlet", {}, function(data) { $("#BooksTable tr:gt(0)").remove(); for (var i = 0; i < data.length; i++) { //插入表行 var trHtml = "<tr sno = "+ data[i].sno +"><td>" + data[i].sno + "</td><td>" + data[i].name + "</td><td>" + data[i].gender + "</td><td>" + data[i].birthday + "</td><td>" + data[i].address + "</td><td><a href=\"#\" class=\"updateLink\">修改</a> <a href=\"#\" class=\"deleteLink\">删除</a></td></tr>"; $("#BooksTable").append(trHtml); } //绑定修改链接 $(".updateLink").click(function() { $.post("UpdateServlet", {sno:$(this).closest("tr").attr("sno")}, function(data){ $("#sno").val(data.sno); $("#name").val(data.name); $("#gender").val(data.gender); $("#birthday").val(data.birthday); $("#address").val(data.address); $("#UpdateDiv").dialog("open"); }, "json"); }); //绑定删除链接 $(".deleteLink").click(function(){ $.post("DeleteServlet", {sno:$(this).closest("tr").attr("sno")}, function(data){ if (data=="1") { RetrieveBooks(); } else { alert("删除图书失败！"); } }, "json"); }); }, "json"); } $(function() { //设定Ajax提交编码格式为utf-8 $.ajaxSetup({ contentType: "application/x-www-form-urlencoded; charset=utf-8" }); //对“添加图书信息”窗口进行初始化 $("#AddDiv").dialog({ title: "添加图书信息", autoOpen : false, height : 280, width : 400, modal : true, show: "blind", hide: "fade", close : function(){ $("#sno").val(""); $("#name").val(""); $("#gender").val(""); $("#birthday").val(""); $("#address").val(""); } }); //对“修改图书信息”窗口进行初始化 $("#UpdateDiv").dialog({ title: "修改图书信息", autoOpen : false, height : 280, width : 400, modal : true, show: "blind", hide: "fade", close : function(){ $("#sno").val(""); $("#name").val(""); $("#gender").val(""); $("#birthday").val(""); $("#address").val(""); } }); //对添加图书窗口的添加键绑定事件驱动程序 $("#AddSubmit").click(function(){ //提交服务器 $.post("AddServlet", {sno:$("#sno").val(), name:$("#name").val(), gender:$("#gender").val(), birthday:$("#birthday").val(), address:$("#address").val()}, function(data){ if (data=="1") { $("#AddDiv").dialog("close"); RetrieveBooks(); } else { $("#AddTip").html("添加图书失败！请重新输入数据。"); $("#AddTip").show().delay(5000).hide(0); } }, "json"); }); //对添加图书窗口的添加键绑定事件驱动程序 $("#UpdateSubmit").click(function(){ //提交服务器 $.post("UpdateServlet", {sno:$("#sno").val(), name:$("#name").val(), gender:$("#gender").val(), birthday:$("#birthday").val(), address:$("#address").val()}, function(data){ if (data=="1") { $("#UpdateDiv").dialog("close"); RetrieveBooks(); } else { $("#UpdateTip").html("更新图书失败！请重新输入数据。"); $("#UpdateTip").show().delay(5000).hide(0); } }, "json"); }); //对“新增图书信息”链接绑定事件驱动程序 $("#AddButton").click(function() { $("#AddDiv").dialog("open"); }); //第一次加载检索所有书籍 RetrieveBooks(); }); </script> </head> <body> <h1>信息管理系统</h1> <a id="AddButton" href="#">增加学生信息</a> <table style="width: 50%" id="BooksTable"> <tr> <th>学号</th> <th>姓名</th> <th >性别</th> <th>生日</th> <th>地址</th> <th></th> </tr> </table> <div id="AddDiv" style="display: hidden"> <form id="AddForm"> <table style="width: 350px;" id="AddTable"> <tr><td>学号 </td><td class="ltd"><input type="text" id="sno" name="sno"/></td></tr> <tr><td>姓名</td><td class="ltd"><input type="text" id="name" name="name" /></td></tr> <tr><td>性别 </td><td class="ltd"><input type="radio" id="gender" name="gender" value="男" checked="checked" />男 <input type="radio" id="gender" name="gender" value="女" />女</td></tr> <tr><td>生日</td><td class="ltd"><input type="text" id="birthday" name="birthday" /></td></tr> <tr><td>地址</td><td class="ltd"><input type="text" id="address" name="address" /></td></tr> <tr ><td colspan="2"><button type="submit" class="balloon" id ="AddSubmit">添 加</button></td></tr> </table> </form> <span style="color:red;" id="AddTip"></span> </div> <div id="UpdateDiv" style="display: hidden"> <form id="UpdateForm"> <table style="width: 350px;" id="UpdateTable"> <tr><td>学号 </td><td><input type="text" id="sno" name="sno"/></td></tr> <tr><td>姓名</td><td><input type="text" id="name" name="name" /></td></tr> <tr><td>性别 </td><td><input type="radio" id="gender" name="gender" value="男" checked="checked" />男 <input type="radio" id="gender" name="gender" value="女" />女</td></tr> <tr><td>生日</td><td><input type="text" id="birthday" name="birthday" /></td></tr> <tr><td>地址</td><td><input type="text" id="address" name="address" /></td></tr> <tr ><td colspan="2"><button type="submit" class="balloon" id ="UpdateSubmit">修 改</button></td></tr> </table> </form> <span style="color:red;" id="UpdateTip"></span> </div> <br /> <hr /> <div style="text-align: center; width: 100%; font-size: 12px; color: #333;"> ©版权所有：石家庄铁道大学信息科学与技术学院 <a href="Lab04-2.png" target="_blank">网站地图</a> </div> </body> </html>
