学生信息管理系统(2)
AJAX应用
1 <html> 2 <head> 3 <title>图书管理系统</title> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <link rel="stylesheet" type="text/css" href="css/style.css"> 6 <link rel="stylesheet" type="text/css" href="css/jquery-ui.css"> 7 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 8 <script type="text/javascript" src="js/jquery-ui.js"></script> 9 <script type="text/javascript"> 10 //通过AJAX方式检索所有的图书 11 function RetrieveBooks() { 12 $.post("list.action", {}, function(data) { 13 $("#BooksTable tr:gt(0)").remove(); 14 for (var i = 0; i < data.length; i++) { 15 //插入表行 16 var trHtml = "<tr id = "+data[i].id +"><td>" + data[i].bookname + "</td><td>" 17 + data[i].author + "</td><td>" + data[i].price 18 + "</td><td><a href=\"#\" class=\"updateLink\">修改</a> <a href=\"#\" class=\"deleteLink\">删除</a></td></tr>"; 19 $("#BooksTable").append(trHtml); 20 } 21 //绑定修改链接 22 $(".updateLink").click(function() { 23 $.post("edit.action", {id:$(this).closest("tr").attr("id")}, function(data){ 24 $("#UpdateId").val(data.id); 25 $("#UpdateBookName").val(data.bookname); 26 $("#UpdateAuthor").val(data.author); 27 $("#UpdatePrice").val(data.price); 28 $("#UpdateDiv").dialog("open"); 29 }, "json"); 30 }); 31 //绑定删除链接 32 $(".deleteLink").click(function(){ 33 $.post("delete.action", {id:$(this).closest("tr").attr("id")}, function(data){ 34 if (data=="1") { 35 RetrieveBooks(); 36 } else 37 { 38 alert("删除图书失败！"); 39 } 40 }, "json"); 41 }); 42 }, "json"); 43 } 44 $(function() { 45 //设定Ajax提交编码格式为utf-8 46 $.ajaxSetup({ 47 contentType: "application/x-www-form-urlencoded; charset=utf-8" 48 }); 49 //对“添加图书信息”窗口进行初始化 50 $("#AddDiv").dialog({ 51 title: "添加学生信息", 52 autoOpen : false, 53 height : 280, 54 width : 400, 55 modal : true, 56 show: "blind", 57 hide: "fade", 58 close : function(){ 59 $("#AddBookName").val(""); 60 $("#AddAuthor").val(""); 61 $("#AddPrice").val(""); 62 } 63 }); 64 //对“修改图书信息”窗口进行初始化 65 $("#UpdateDiv").dialog({ 66 title: "修改图书信息", 67 autoOpen : false, 68 height : 280, 69 width : 400, 70 modal : true, 71 show: "blind", 72 hide: "fade", 73 close : function(){ 74 $("#UpdateId").val(""); 75 $("#UpdateBookName").val(""); 76 $("#UpdateAuthor").val(""); 77 $("#UpdatePrice").val(""); 78 } 79 }); 80 //对添加图书窗口的添加键绑定事件驱动程序 81 $("#AddSubmit").click(function(){ 82 //提交服务器 83 $.post("add.action", {bookname:$("#AddBookName").val(), author:$("#AddAuthor").val(), price:$("#AddPrice").val()}, function(data){ 84 if (data=="1") { 85 $("#AddDiv").dialog("close"); 86 RetrieveBooks(); 87 } else 88 { 89 $("#AddTip").html("添加图书失败！请重新输入数据。"); 90 $("#AddTip").show().delay(5000).hide(0); 91 } 92 }, "json"); 93 }); 94 //对添加图书窗口的添加键绑定事件驱动程序 95 $("#UpdateSubmit").click(function(){ 96 //提交服务器 97 $.post("update.action", {id:$("#UpdateId").val(),bookname:$("#UpdateBookName").val(), author:$("#UpdateAuthor").val(), price:$("#UpdatePrice").val()}, function(data){ 98 if (data=="1") { 99 $("#UpdateDiv").dialog("close"); 100 RetrieveBooks(); 101 } else 102 { 103 $("#UpdateTip").html("更新图书失败！请重新输入数据。"); 104 $("#UpdateTip").show().delay(5000).hide(0); 105 } 106 }, "json"); 107 }); 108 //对“新增图书信息”链接绑定事件驱动程序 109 $("#AddButton").click(function() { 110 $("#AddDiv").dialog("open"); 111 }); 112 //第一次加载检索所有书籍 113 RetrieveBooks(); 114 }); 115 </script> 116 </head> 117 <body> 118 <h1>学生管理系统</h1> 119 <a id="AddButton" href="#">增加学生信息</a> 120 <table style="width: 50%" id="BooksTable"> 121 <tr> 122 <th>学号</th> 123 <th>姓名</th> 124 <th>性别</th> 125 <th>生日</th> 126 <th>住址</th> 127 </tr> 128 </table> 129 <div id="AddDiv" style="display: hidden"> 130 <form id="AddForm"> 131 <table style="width: 350px;" id="AddTable"> 132 <tr> 133 <th width="30%">学号：</th> 134 <td width="70%" class="ltd"><input name="bookname" type="text" id="AddBookName"></td> 135 </tr> 136 <tr> 137 <th>姓名：</th> 138 <td class="ltd"><input name="author" type="text" id="AddAuthor"></td> 139 </tr> 140 <tr> 141 <th>性别：</th> 142 <td class="ltd"><input name="price" type="text" id="AddPrice">元</td> 143 </tr> 144 <tr> 145 <th>生日：</th> 146 <td class="ltd"><input name="price" type="text" id="AddPrice">元</td> 147 </tr> 148 <tr> 149 <th>住址：</th> 150 <td class="ltd"><input name="price" type="text" id="AddPrice">元</td> 151 </tr> 152 <tr> 153 <th colspan="2"><input type="button" value="添加" id ="AddSubmit"> <input 154 type="reset" value="重置"></th> 155 </tr> 156 </table> 157 </form> 158 <span style="color:red;" id="AddTip"></span> 159 </div> 160 <div id="UpdateDiv" style="display: hidden"> 161 <form id="UpdateForm"> 162 <table style="width: 350px;" id="UpdateTable"> 163 <tr> 164 <th width="30%">书名：</th> 165 <td width="70%" class="ltd"><input name="id" type="hidden" id="UpdateId"><input name="bookname" type="text" id="UpdateBookName"></td> 166 </tr> 167 <tr> 168 <th>作者：</th> 169 <td class="ltd"><input name="author" type="text" id="UpdateAuthor"></td> 170 </tr> 171 <tr> 172 <th>价格：</th> 173 <td class="ltd"><input name="price" type="text" id="UpdatePrice">元</td> 174 </tr> 175 <tr> 176 <th colspan="2"><input type="button" value="修改" id ="UpdateSubmit"> <input 177 type="reset" value="重置"></th> 178 </tr> 179 </table> 180 </form> 181 <span style="color:red;" id="UpdateTip"></span> 182 </div> 183 <br /> 184 <hr /> 185 <div style="text-align: center; width: 100%; font-size: 12px; color: #333;"> 186 ©版权所有：石家庄铁道大学信息科学与技术学院 <a href="Lab04-2.png" 187 target="_blank">网站地图</a> 188 </div> 189 </body> 190 </html>
AjaxController
1 package servlets; 2 3 import java.io.IOException; 4 import java.util.*; 5 import javax.servlet.ServletException; 6 import javax.servlet.annotation.WebServlet; 7 import javax.servlet.http.HttpServlet; 8 import javax.servlet.http.HttpServletRequest; 9 import javax.servlet.http.HttpServletResponse; 10 11 import org.json.*; 12 13 import book.bean.Book; 14 15 /** 16 * 接受客户端后缀为action的请求，并进行处理，并返回响应 17 * 18 * @author Leiyu 19 * @version 1.0 20 * 21 */ 22 @WebServlet("*.action") 23 public class AjaxController extends HttpServlet { 24 private static final long serialVersionUID = 1L; 25 26 public AjaxController() { 27 super(); 28 // TODO Auto-generated constructor stub 29 } 30 31 protected void doGet(HttpServletRequest request, HttpServletResponse response) 32 throws ServletException, IOException { 33 doPost(request, response); 34 } 35 36 protected void doPost(HttpServletRequest request, HttpServletResponse response) 37 throws ServletException, IOException { 38 39 request.setCharacterEncoding("utf-8"); 40 response.setContentType("text/html;charset=utf-8"); 41 42 String actionUrl = request.getServletPath(); // 获取客户端的访问URL地址信息 43 44 if (actionUrl.equals("/list.action")) { // 查询所有图书 45 ArrayList<Book> list = Book.getBookList(); // 调用BookInfo的getBookList方法完成 46 // 使用JSONArray对象将结果构建为json对象并输出到客户端 47 JSONArray jsonArray = new JSONArray(); 48 for (int i = 0; i < list.size(); i++) { 49 Book book = list.get(i); 50 Map<String, Object> map = new HashMap<String, Object>(); 51 map.put("id", book.getId()); 52 map.put("bookname", book.getBookname()); 53 map.put("author", book.getAuthor()); 54 map.put("price", book.getPrice()); 55 JSONObject BookObj = new JSONObject(map); 56 jsonArray.put(BookObj); 57 } 58 // 向客户端返回json结果 59 response.getWriter().print(jsonArray.toString()); 60 61 } else if (actionUrl.equals("/add.action")) { // 增加图书操作 62 Book bi = new Book(); 63 bi.setBookname(request.getParameter("bookname")); 64 bi.setAuthor(request.getParameter("author")); 65 bi.setPrice(request.getParameter("price")); 66 67 int r = Book.addBook(bi); // 调用BookInfo的addBook方法完成 68 // 向客户端返回结果 69 response.getWriter().print(r); 70 71 } else if (actionUrl.equals("/edit.action")) { // 编辑图书操作 72 String id = request.getParameter("id"); 73 Book bi = Book.getBookById(id); // 调用BookInfo的getBookById方法完成 74 // 将该对象构建为json数据 75 Map<String, Object> map = new HashMap<String, Object>(); 76 map.put("id", bi.getId()); 77 map.put("bookname", bi.getBookname()); 78 map.put("author", bi.getAuthor()); 79 map.put("price", bi.getPrice()); 80 JSONObject BookObj = new JSONObject(map); 81 // 向客户端返回结果 82 response.getWriter().print(BookObj.toString()); 83 84 } else if (actionUrl.equals("/update.action")) { // 更新图书操作 85 Book bi = new Book(); 86 bi.setId(request.getParameter("id")); 87 bi.setBookname(request.getParameter("bookname")); 88 bi.setAuthor(request.getParameter("author")); 89 bi.setPrice(request.getParameter("price")); 90 int r = Book.updateBook(bi);// 调用BookInfo的updateBook方法完成 91 response.getWriter().print(r); // 向客户端返回结果 92 93 } else if (actionUrl.equals("/delete.action")) { // 删除图书操作 94 String id = request.getParameter("id"); 95 int r = Book.deleteBook(id); // 调用BookInfo的deleteBook方法完成 96 response.getWriter().print(r); // 向客户端返回结果 97 } 98 } 99 100 }
