使用AJAX获取数据进行数据展示

2022-05-14 23:50| 来源: 网络整理| 查看: 265

本文链接 https://blog.csdn.net/zyk262511 首先是项目的样式在这里插入图片描述下面是BookBean的代码

package cn.hnpi.bean; public class BookBean { private Integer id; private String Book_name; //图书名称 private String book_author; //图书作者 private String book_isbn; //图书编号 private String book_publish; //图书出版社 private String classify_id; //图书分类id public BookBean() { super(); // TODO Auto-generated constructor stub } public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getBook_name() { return Book_name; } public void setBook_name(String bookName) { Book_name = bookName; } public String getBook_author() { return book_author; } public void setBook_author(String bookAuthor) { book_author = bookAuthor; } public String getBook_isbn() { return book_isbn; } public void setBook_isbn(String bookIsbn) { book_isbn = bookIsbn; } public String getBook_publish() { return book_publish; } public void setBook_publish(String bookPublish) { book_publish = bookPublish; } public String getClassify_id() { return classify_id; } public void setClassify_id(String classifyId) { classify_id = classifyId; } }

因为使用啦mvc的架构所以略显麻烦，其实可以写一起的 service和serviceimol代码

package cn.hnpi.service; import java.util.List; import cn.hnpi.bean.BookBean; public interface BookService { List list(); } package cn.hnpi.service.impl; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.util.ArrayList; import java.util.List; import cn.hnpi.bean.BookBean; import cn.hnpi.service.BookService; import cn.hnpi.util.DButil; public class BookServiceImpl implements BookService { @Override public List list() { Connection conn = DButil.getConn(); PreparedStatement ps = null; ResultSet rs = null; List books = new ArrayList(); try { String sql = "select * from books"; ps = conn.prepareStatement(sql); rs = ps.executeQuery(); while (rs.next()) { BookBean book = new BookBean(); book.setId(rs.getInt(1)); book.setBook_name(rs.getString(2)); book.setBook_author(rs.getString(3)); book.setBook_isbn(rs.getString(4)); book.setBook_publish(rs.getString(5)); book.setClassify_id(rs.getString(6)); books.add(book); } } catch (Exception e) { e.printStackTrace(); } finally { DButil.closeConn(rs, ps, conn); } return books; } }

上面代码是连接数据库所用，连接数据库还需要一个连接数据库的工具包，我就不发啦，你应该知道

再就是获取数据库的数据后所到的servlet

package cn.hnpi.servlet; import java.io.IOException; import java.io.PrintWriter; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import com.alibaba.fastjson.JSON; import cn.hnpi.bean.BookBean; import cn.hnpi.service.BookService; import cn.hnpi.service.impl.BookServiceImpl; public class ListServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); BookService bookService = new BookServiceImpl(); List books = bookService.list(); String json = JSON.toJSONString(books); out.flush(); out.close(); } }

需要使用fastjson工具包 JSON链接本链接转自傻啦吧唧小农民最后就是观看页面的代码：

My JSP 'booklist.jsp' starting page table { margin-top: 36px; text-align: center; border-collapse: collapse; text-align: center; } id 书名作者编号出版社分类id $(function() { $.ajax({ url : "ListServlet", //提交地址 type : "post", //提交方式 dataType : "json", //指定服务器返回的数据类型 success : function(data) { //请求成功后的回调函数 $("#tbody").empty(); var str = ""; for (var i = 0; i < data.length; i++) { trStr += "" + data[i].id + "" + data[i].book_name + "" + data[i].book_author + "" + data[i].book_isbn + "" + data[i].book_publish + "" + data[i].classify_id + "" } $("#tbody").show().append(str); }, error : function() { alert('请求失败'); } }); });

以上就是全部代码，希望能对你有些用处。。。

【本文地址】

公司简介

联系我们