后台代码是采用之前的项目代码,共有增删改查四个操作 前端代码:
//index <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table align="center"> <tr> <th width="30">ID</th> <th width="50">书名</th> <th width="50">类别</th> <th width="50">作者</th> <th width="80">操作</th> </tr> <tbody id="t"> </tbody> <script src="jquery.js"></script> <script type="text/javascript"> $(function () { getBook() function getBook(){ $.ajax({ type:'post', url:"http://localhost:8080/BookManage/BookListServlet", dataType:"json", success:function (data) { $.each(data,function(i){ var str='' str="<tr><td>"+data[i].bid+"</td>" +"<td>"+data[i].bname+"</td>" +"<td>"+data[i].type+"</td>" +"<td>"+data[i].author+"</td>" +"<td><a href='http://localhost:8080/BookManage/BookDelServlet?bid="+data[i].bid+"'>删除</a>" +"<a class='update' href='http://localhost:64756/BookManage/updatebook.html?bid="+data[i].bid+"'>更新</a>" +"</td>" +"</tr>"; $('#t').append(str) }) } }) } }) </script> <tr> <td colspan="5" align="right"> <a href="http://localhost:64756/BookManage/addbook.html">添加图书</a> </td> </tr> </table> </body> </html> <html lang="en"> <head> <meta charset="UTF-8"> <title>添加图书</title> </head> <body > <form action="http://localhost:8080/BookManage/BookAddServlet" method="post"> 名称：<input type="text" name="bname"><br> 类别：<input type="text" name="type"><br> 作者：<input type="text" name="author"><br> <input type="submit" value="提交"> </form> </body> </html> <html lang="en"> <head> <meta charset="UTF-8"> <title>更新</title> </head> <body> <form action="http://localhost:8080/BookManage/BookUpdateServlet" method="post"> ID：<input type="text" name="bid" id="id" readonly="readonly"><br> 名称：<input type="text" name="bname"><br> 类别：<input type="text" name="type" ><br> 作者：<input type="text" name="author" ><br> <input type="submit" value="提交"> </form> <script src="jquery.js"></script> <script type="text/javascript"> $(function () { function GetRequest() { var url = location.search; //获取url中"?"符后的字串 var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("&"); for (var i = 0; i < strs.length; i++) { theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]); } } return theRequest; } $(document).ready(function () { var Request = new Object(); Request = GetRequest(); var val= Request["bid"]; $('#id').val(val); }); }) </script> </body> </html>与后台代码连接 前后端分离想要访问servlet需要在servlet里做处理,否则会遇到一些跨域产生的问题
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); response.setCharacterEncoding("utf-8"); //处理跨域请求 response.setHeader("Access-Control-Allow-Origin","*"); PrintWriter out = response.getWriter(); BookService bookservice = new BookServiceImpl(); List<Book> books = bookservice.list(); String json = JSON.toJSONString(books); out.print(json); out.flush(); out.close(); }