简单图书管理通过AJAX查询数据库JSON返回到前台显示
jQuery 使用AJAX提交到后台代码处理，然后以json方式返回到前台并显示在页面
JSON下载：http://repo1.maven.org/maven2/com/alibaba/fastjson/
结构：
效果图：
分了三个层，没这么细，bean，servlet，util；没太大必要
数据库：
Book.java:
package com.chaz.bean;
public class Book {
private Integer id;
private String bookName;//名称
private String bookAuthor;//作者
private String bookIsbn;//编号
private String bookPublish;//出版社
public Book(Integer id, String bookName, String bookAuthor, String bookIsbn, String bookPublish) {
super();
this.id = id;
this.bookName = bookName;
this.bookAuthor = bookAuthor;
this.bookIsbn = bookIsbn;
this.bookPublish = bookPublish;
}
public Book() {
super();
// TODO Auto-generated constructor stub
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getBookName() {
return bookName;
}
public void setBookName(String bookName) {
this.bookName = bookName;
}
public String getBookAuthor() {
return bookAuthor;
}
public void setBookAuthor(String bookAuthor) {
this.bookAuthor = bookAuthor;
}
public String getBookIsbn() {
return bookIsbn;
}
public void setBookIsbn(String bookIsbn) {
this.bookIsbn = bookIsbn;
}
public String getBookPublish() {
return bookPublish;
}
public void setBookPublish(String bookPublish) {
this.bookPublish = bookPublish;
}
}
JsonServlet.java:这主要是连接数据库查询语句
package com.chaz.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSON;
import com.chaz.bean.Book;
import com.chaz.util.DBUtil;
public class JsonServlet 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 {
//处理中文乱码问题
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
PreparedStatement ps = null;
ResultSet rs = null;
Connection conn = DBUtil.getConn();//连接数据库
try {
String sql = "select * from Book";
ps = conn.prepareStatement(sql);
rs = ps.executeQuery();
List<Book> books = new ArrayList<Book>();
while (rs.next()) {
// next（）获取里面的内容
Book book = new Book();
book.setId(rs.getInt(1));
book.setBookName(rs.getString(2));
book.setBookAuthor(rs.getString(3));
book.setBookIsbn(rs.getString(4));
book.setBookPublish(rs.getString(5));
books.add(book);
}
String json = JSON.toJSONString(books);
out.print(json);
//System.out.println("show");
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} finally {
DBUtil.close(conn, ps, rs);
}
out.flush();
out.close();
}
}
DBUtil.java自己去写，不想写链接在这里：https://download.csdn.net/download/weixin_43330884/11867085
前台：index.jsp；这是直接就查询的，实现效果图效果可以自己再写或者在本页面写一个按钮点击查询的，这里就不再说了
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>首頁</title>
<style type="text/css">
body {
background: url("img/book.jpg") no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
}
table {
margin-top: 36px; text-align : center;
border-collapse: collapse;
text-align: center;
}
</style>
<script type="text/javascript" src="JS/jQuery.js"></script>
</head>
<body>
<table border="1" align="center">
<thead>
<tr>
<td>id</td>
<td>书名</td>
<td>作者</td>
<td>编号</td>
<td>出版社</td>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
<script type="text/javascript">
$(function() {
$.ajax({
url : "JsonServlet",//提交地址
type : "post",//提交方式（get,post）
dataType : "json",//指定服务器返回的数据类型
success : function(data) {
//请求成功后的回调函数
//console.log(data);
$("#tbody").empty(); //删除匹配的元素集合中所有的子节点（就是不重复执行）
var trStr = "";
for (var i = 0; i < data.length; i++) {
trStr += "" + data[i].id + " " + data[i].bookName + " " + data[i].bookAuthor + " " + data[i].bookIsbn + " " + data[i].bookPublish + " 你可能感兴趣的:(JavaWeb,AJAX,JSON)