學生信息管理系統web端（使用ajax+jquery）

本文轉載自查看原文 2020-06-02 00:11 987

主要功能：實現學生信息的增、刪、改、查。

使用技術：ajax+jquery,MVC框架。

功能解釋：使用ajax異步交互，在index.html頁面使用jquery的dialog窗口實現增刪改查。

數據庫：sqlserver

項目布置：

1.java視圖

2.數據庫視圖：

功能視圖：

這是我自己做的頁面有點粗糙哈。

1.主頁（展示信息）

2.添加信息（跳出框添加）

3.修改

內容展示：ajax是javaweb里一個重要的知識點，他能讓頁面在不跳轉的情況下實現部分數據的交互，比如用戶注冊時提示信息等。ajax一般結合jquery使用，下面我來展示代碼。

1.user.java(javabean類存放用戶信息）

 1 package com.web.User;
 2 
 3 public class User {
 4     private int id;
 5     private String number;//學號
 6     private String name;//姓名
 7     private String sex;//性別
 8     private String birthday;//生日
 9     private String address;//地址
10     public User() {}
11     public User(int id,String name,String sex,String birthday,String address)
12     {
13         this.setId(id);
14         this.setName(name);
15         this.setSex(sex);
16         this.setBirthday(birthday);
17         this.setAddress(address);
18     }
19     public User(String name,String sex,String birthday,String address)
20     {
21         this.setName(name);
22         this.setSex(sex);
23         this.setBirthday(birthday);
24         this.setAddress(address);
25     }
26     public int getId() {
27         return id;
28     }
29     public void setId(int id) {
30         this.id = id;
31     }
32     public String getNumber() {
33         return number;
34     }
35     public void setNumber(String number) {
36         this.number = number;
37     }
38     public String getName() {
39         return name;
40     }
41     public void setName(String name) {
42         this.name = name;
43     }
44     public String getSex() {
45         return sex;
46     }
47     public void setSex(String sex) {
48         this.sex = sex;
49     }
50     public String getAddress() {
51         return address;
52     }
53     public void setAddress(String address) {
54         this.address = address;
55     }
56     public String getBirthday() {
57         return birthday;
58     }
59     public void setBirthday(String birthday) {
60         this.birthday = birthday;
61     }
62 
63 }

user.java

2.dao.java(存放增刪改查函數)

 1 package com.web.Dao;
 2 import java.sql.*;
 3 import java.util.*;
 4 
 5 import com.web.Connection.StudentConnection;
 6 import com.web.User.User;
 7 
 8 
 9 public class Dao {
10 public static int addStudent(String number,String name,String sex,String birthday,String address)
11 {
12     int result=0;
13     String sql="insert into student_information values('"+number+"','"+name+"','"+sex+"','"+birthday+"','"+address+"')";
14     StudentConnection conn=new StudentConnection();
15     result=conn.executeUpdate(sql);
16     conn.close();
17     return result;
18 }
19 public static int UpdateStudent(String id,String number,String name,String sex,String birthday,String address)
20 {
21     int result=0;
22     String sql="update  student_information set number='"+number+"',name='"+name+"',sex='"+sex+"' ,birthday='"+birthday+"',address='"+address+"'where id='"+id+"'";
23     StudentConnection conn=new StudentConnection();
24     result=conn.executeUpdate(sql);
25     conn.close();
26     return result;
27 }
28 public static int deleteStudent(int id){
29     int result=0;
30     String sql="delete from student_information where id="+id;
31     StudentConnection jdbc=new StudentConnection();
32     result=jdbc.executeUpdate(sql);
33     jdbc.close();
34     return result;
35 }
36 public static User getBookById(int id){
37     String sql="select * from student_information where id="+id;
38     StudentConnection jdbc=new StudentConnection();
39     ResultSet rs=jdbc.executeQuery(sql);
40     User bi=new User();
41     try {
42         if(rs.next()){
43             bi.setId(rs.getInt("id"));
44             bi.setNumber(rs.getString("number"));
45             bi.setName(rs.getString("name"));
46             bi.setSex(rs.getString("sex"));
47             bi.setBirthday(rs.getString("birthday"));
48             bi.setAddress(rs.getString("address"));
49         }
50          rs.close();
51     } catch (SQLException e) {
52         e.printStackTrace();
53     }
54     jdbc.close();
55     return bi;
56 }
57 public static ArrayList<User> getBookList(){
58     ArrayList<User> list=new ArrayList<User>();
59     String sql="select * from student_information";
60     StudentConnection jdbc=new StudentConnection();
61     ResultSet rs=jdbc.executeQuery(sql);
62     
63     try {
64         while(rs.next()){
65             User bi=new User();
66             bi.setId(rs.getInt("id"));
67             bi.setNumber(rs.getString("number"));
68             bi.setName(rs.getString("name"));
69             bi.setSex(rs.getString("sex"));
70             bi.setBirthday(rs.getString("birthday"));
71             bi.setAddress(rs.getString("address"));
72             list.add(bi);
73         }
74          rs.close();
75     } catch (SQLException e) {
76         e.printStackTrace();
77     }
78     jdbc.close();
79     return list;
80 }
81 }

dao.java

3.studentConnection.java(javabean交互)

 1 package com.web.Connection;
 2 
 3 import java.sql.Connection;
 4 import java.sql.DriverManager;
 5 import java.sql.ResultSet;
 6 import java.sql.SQLException;
 7 import java.sql.Statement;
 8 
 9 public class StudentConnection {
10     public static String driverName="com.microsoft.sqlserver.jdbc.SQLServerDriver";
11     public static String  dbURL="jdbc:sqlserver://127.0.0.1:1433;DatabaseName=java";
12     public static  String userName="sa";
13     public static String userPwd="*****";
14     private Connection conn = null;
15     private Statement stmt = null;
16 
17     
18     public StudentConnection() {
19         try {
20             Class.forName(driverName);
21             conn = DriverManager.getConnection(dbURL, userName, userPwd);
22             stmt = conn.createStatement();
23         } catch (Exception ex) {
24             System.out.println("數據庫連接失敗！");
25         }
26     }
27 
28     /**
29      * 執行更新操作
30      * @param s
31      * SQL語句
32      * @return
33      * 更新操作的結果
34      */
35     public int executeUpdate(String s) {
36         int result = 0;
37         try {
38             result = stmt.executeUpdate(s);
39         } catch (Exception ex) {
40             System.out.println("更新出現異常！");
41         }
42         return result;
43     }
44     
45     /**
46      * 執行查詢操作
47      * @param s
48      * SQL語句
49      * @return
50      * 查詢結果
51      */
52     public ResultSet executeQuery(String s) {
53         ResultSet rs = null;
54         try {
55             rs = stmt.executeQuery(s);
56         } catch (Exception ex) {
57             System.out.println("查詢出現異常！");
58         }
59         return rs;
60     }
61 
62     /**
63      * 關閉數據庫
64      */
65     public void close() {
66         try {
67             stmt.close();
68             conn.close();
69         } catch (Exception e) {
70         }
71     }
72 }

studentConnection.java

4.AjaxServlet.java

  1 package com.web.servlet;
  2 
  3 import java.io.IOException;
  4 import java.util.ArrayList;
  5 import java.util.HashMap;
  6 import java.util.Map;
  7 
  8 import javax.servlet.ServletException;
  9 import javax.servlet.annotation.WebServlet;
 10 import javax.servlet.http.HttpServlet;
 11 import javax.servlet.http.HttpServletRequest;
 12 import javax.servlet.http.HttpServletResponse;
 13 
 14 import org.json.JSONArray;
 15 import org.json.JSONObject;
 16 
 17 import com.web.Dao.Dao;
 18 import com.web.User.User;
 19 
 20 
 21 
 22 /**
 23  * Servlet implementation class AjaxServlet
 24  */
 25 @WebServlet("*.action")
 26 public class AjaxServlet extends HttpServlet {
 27     private static final long serialVersionUID = 1L;
 28 
 29     /**
 30      * Default constructor. 
 31      */
 32     public AjaxServlet() {
 33         // TODO Auto-generated constructor stub
 34     }
 35 
 36     /**
 37      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
 38      */
 39     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 40         // TODO Auto-generated method stub
 41         response.getWriter().append("Served at: ").append(request.getContextPath());
 42     }
 43 
 44     /**
 45      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
 46      */
 47     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 48         // TODO Auto-generated method stub
 49         
 50         request.setCharacterEncoding("utf-8");
 51         response.setContentType("text/html;charset=utf-8");
 52         String actionURL=request.getServletPath();
 53         System.out.println(actionURL);
 54         if(actionURL.equals("/list.action"))
 55         {
 56         ArrayList<User> list = Dao.getBookList(); // 調用BookInfo的getBookList方法完成
 57         //使用JSONArray對象將結果構建為json對象並輸出到客戶端
 58         JSONArray jsonArray = new JSONArray();
 59         for (int i = 0; i < list.size(); i++) {
 60             User book = list.get(i);
 61             Map<String, Object> map = new HashMap<String, Object>();
 62             map.put("id",  book.getId());
 63             map.put("number", book.getNumber());
 64             map.put("name", book.getName());
 65             map.put("sex", book.getSex());
 66             map.put("birthday", book.getBirthday());
 67             
 68             map.put("address", book.getAddress());
 69             JSONObject BookObj = new JSONObject(map);
 70             jsonArray.put(BookObj);
 71         }
 72         //向客戶端返回json結果
 73         response.getWriter().print(jsonArray.toString());
 74         
 75     } else if (actionURL.equals("/add.action")) { // 增加圖書操作
 76         String number = request.getParameter("number");
 77         String name = request.getParameter("name");
 78         String sex = request.getParameter("sex");
 79         String birthday = request.getParameter("birthday");
 80         String address = request.getParameter("address");
 81         System.out.println(name);
 82         int r = Dao.addStudent(number,name,sex,birthday,address); // 調用BookInfo的addBook方法完成
 83         //向客戶端返回結果
 84         response.getWriter().print(r);
 85 
 86     } else if (actionURL.equals("/edit.action")) { //編輯圖書操作
 87         int id = Integer.parseInt(request.getParameter("id"));
 88         User book = Dao.getBookById(id); // 調用BookInfo的getBookById方法完成
 89         //將該對象構建為json數據
 90         Map<String, Object> map1 = new HashMap<String, Object>();
 91         map1.put("id",  book.getId());
 92         map1.put("number", book.getNumber());
 93         map1.put("name", book.getName());
 94         map1.put("sex", book.getSex());
 95         map1.put("birthday", book.getBirthday());
 96         map1.put("address", book.getAddress());
 97         JSONObject BookObj = new JSONObject(map1);
 98         //向客戶端返回結果
 99         response.getWriter().print(BookObj.toString());
100         
101     } else if (actionURL.equals("/update.action")) { //更新圖書操作
102         String id1=request.getParameter("id");
103         String number = request.getParameter("number");
104         String name = request.getParameter("name");
105         String sex = request.getParameter("sex");
106         String birthday = request.getParameter("birthday");
107         String address = request.getParameter("address");
108         System.out.println(name);
109         int r = Dao.UpdateStudent(id1, number,name, sex,birthday,address);//調用BookInfo的updateBook方法完成
110         response.getWriter().print(r);  //向客戶端返回結果
111 
112     } else if (actionURL.equals("/delete.action")) { //刪除圖書操作
113         int id=Integer.parseInt(request.getParameter("id"));
114         int r = Dao.deleteStudent(id); //調用BookInfo的deleteBook方法完成
115         response.getWriter().print(r); //向客戶端返回結果
116     }
117 }
118 }
119

AjaxServlet.java

5.index.html

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>學生信息管理系統</title>
  6 
  7 <link rel="stylesheet" type="text/css" href="css/style.css">
  8 <link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
  9 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
 10 <script type="text/javascript" src="js/jquery-ui.js"></script>
 11 <script type="text/javascript">
 12 
 13 function check()
 14 {
 15      $.post("list.action",{},function(data){
 16         $("#studenttable tr:gt(0)").remove();
 17         var htm;
 18         for(var i=0;i<data.length;i++)
 19             {
 20                 htm="<tr id = "+data[i].id +"><td>"+data[i].number+"</td><td>"+data[i].name+"</td><td>"+data[i].sex+"</td><td>"+data[i].birthday+"</td><td>"+data[i].address+
 21                 "</td><td colspan=\"2\"><a href=\"#\" class=\"updatelink\">修改</a><a href=\"#\" class=\"deletelink\">刪除</a></td></tr>";
 22                 $("#studenttable").append(htm);
 23              }
 24         $(".updatelink").click(function(){
 25             $.post("edit.action",{id:$(this).closest("tr").attr("id")},function(data){
 26                 $("#updateId").val(data.id);
 27                 $("#updatenumber").val(data.number);
 28                 $("#updatename").val(data.name);
 29                 $("#updatesex").val(data.sex);
 30                 $("#updatebirthday").val(data.birthday);
 31                 $("#updateaddress").val(data.address);
 32                 $("#updateDiv").dialog("open");
 33             },"json");
 34             });
 35         $(".deletelink").click(function(){
 36             $.post("delete.action",{id:$(this).closest("tr").attr("id")},function(data){
 37                 if(data=="1")
 38                     {
 39                     check();
 40                     }
 41                 else{
 42                     alert("刪除失敗")
 43                 }
 44             },"json");
 45         });
 46      },"json");
 47 }
 48         $(function(){
 49             $.ajaxSetup({contentType: "application/x-www-form-urlencoded; charset=utf-8" });
 50             
 51             $("#addDiv").dialog({
 52                 title:"添加學生信息",
 53                 autoOpen:false,
 54                 height:500,
 55                 width:400,
 56                 modal:true,
 57                 show:"blind",
 58                 hide:"fade",
 59                 close:function(){
 60                     $("#addnumber").val("");
 61                     $("#addname").val("");
 62                     $("#addsex").val("");
 63                     $("#addbirthday").val("");
 64                     $("#addaddress").val("");
 65                     
 66                 }
 67  
 68             });
 69             $("#updateDiv").dialog({
 70                 title:"修改學生信息",
 71                 autoOpen:false,
 72                 height:500,
 73                 width:400,
 74                 modal:true,
 75                 show:"blind",
 76                 hide:"fade",
 77                 close:function(){
 78                     $("#updatenumber").val("");
 79                     $("#updatename").val("");
 80                     $("#updatesex").val("");
 81                     $("#updatebirthday").val("");
 82                     $("#updateaddress").val("");
 83                     
 84                 }
 85  
 86             });
 87             $("#addsubmit").click(function(){
 88                 $.post("add.action",{number:$("#addnumber").val(),name:$("#addname").val(),sex:$("#addsex").val(),birthday:$("#addbirthday").val(),address:$("#addaddress").val()}
 89             ,function(data)
 90             {
 91                     if(data=="1")
 92                         {
 93                             $("#addDiv").dialog("close");
 94                             check();
 95                         }
 96                     else{
 97                         $("#AddTip").html("添加信息失敗！請重新輸入數據。");
 98                         $("#AddTip").show().delay(5000).hide(0);
 99                     }
100                     
101             },"json");
102                 });
103             $("#updatesubmit").click(function(){
104                 $.post("update.action",{id:$("#updateId").val(),number:$("#updatenumber").val(),name:$("#updatename").val(),sex:$("#updatesex").val(),birthday:$("#updatebirthday").val(),address:$("#updateaddress").val()}
105             ,function(data)
106             {
107                     if(data=="1")
108                         {
109                             $("#updateDiv").dialog("close");
110                             check();
111                         }
112                     else{
113                         $("#updateTip").html("修改信息失敗！請重新輸入數據。");
114                         $("#updateTip").show().delay(5000).hide(0);
115                     }
116             },"json");});
117             $("#addbutton").click(function(){
118                 $("#addDiv").dialog("open");
119             });
120             check();
121             
122         
123                
124      });
125     
126 </script>
127 </head>
128 <body>
129 <h1>學生信息管理系統</h1>
130     <a id="addbutton" href="#">增加學生信息</a>
131 <table border="1" style="background-color:green;" id="studenttable">
132         <tr>
133             <th>學號</th>
134             <th>姓名</th>
135             <th>性別</th>
136             <th>生日</th>
137             <th>地址</th>
138             <th colspan="2">操作</th>
139         </tr>
140 </table>
141 <div id=updateDiv style="display: none">
142  <form id="updateform">
143     <table border="1"  id=UpdateTable style="width:400px">
144             <tr><th>學號：</th><td><input type="text" id="updateId" name="id" style="display:none"><input type="text" id="updatenumber" name="number"></td></tr>
145             <tr><th>姓名：</th><td><input type="text" id="updatename" name="name"></td></tr>
146             <tr><th>性別：</th><td><input type="radio" id="updatesex" name="sex" value="男" checked >男
147             <input type="radio" id="sex" name="updatesex" value="女">女</td></tr>
148             <tr><th>生日：</th><td><input type="date" id="updatebirthday" name="birthday"></td><tr>
149             
150             <tr><th>地址：</th><td> <input type="date" id="updateaddress" name="address"></td></tr>
151             <tr><th colspan="2" style="background-color:#C6E2FF;"><input type="submit" id="updatesubmit" name="submit" value="修改" style="background-color:#F08080"/> <input type="reset" id="updatereset" value="重置" style="background-color:#F08080"/></th></tr>
152     
153     </table>
154   </form>
155 <span style="color:red;" id="updateTip"></span>
156 
157 </div>
158 <div id="addDiv" style="display: none">
159  <form id="addform">
160     <table border="1" style="width:400px" id="AddTable">
161         
162             <tr><th>學號：</th><td><input type="text" id="addnumber" name="number" ></td></tr>
163             <tr><th>姓名：</th><td><input type="text" id="addname" name="name"></td></tr>
164             <tr><th>性別：</th><td><input type="radio" id="addsex" name="sex" value="男" checked >男
165             <input type="radio" id="addsex" name="sex"value="女" >女</td></tr>
166             <tr><th>生日：</th><td><input type="date" id="addbirthday" name="birthday"></td><tr>
167             <tr><th>地址： </th><td><input type="date" id="addaddress" name="address"></td></tr>
168             <tr><th colspan="2" style="background-color:#C6E2FF;"><input type="submit" id="addsubmit"  name="submit"value="添加"  style="background-color:#F08080"/> <input type="reset" style="background-color:#F08080" id="addreset" value="重置"/></th></tr>
169     
170     </table>
171   </form>
172   <span style="color:red;" id="AddTip"></span>
173 </div>
174  
175 </body>
176 </html>

index.html

6.style.css(頁面樣式)

 1 body {
 2     text-align: center;
 3      background-image: url('images/bg_03.jpg');
 4      background-size:cover;
 5 }
 6 
 7 table {
 8     width: 500px;
 9     border: 1px solid #696969;
10     border-collapse: collapse;
11     margin:0 auto;
12 }
13 th {
14     border: 1px solid #696969;
15     background-color: #FF1493;
16 }
17 td {
18     text-align: center;
19     border: 1px solid #696969;
20     height: 50px;
21     background-color: #FFF5EE;
22 }
23 td.ltd {
24     text-align: left;
25 }
26 input {
27     font-size: 20px;
28 }

style.css

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 學生信息管理系統學生信息管理系統學生信息管理系統 SSM學生信息管理系統 java+mysql學生信息管理系統 javaEE項目實踐——學生信息管理系統學生信息管理系統源碼學生信息管理系統(php+MySql) java+mysql學生信息管理系統學生信息管理系統（C語言）