简单图书管理通过AJAX查询数据库JSON返回到前台显示

最新推荐文章于 2022-05-20 20:53:07 发布

南宫廿贰

最新推荐文章于 2022-05-20 20:53:07 发布

阅读量1.7k

点赞数 2

分类专栏： JavaWeb 文章标签： AJAX JSON

本文链接：https://blog.csdn.net/weixin_43330884/article/details/102761647

版权

JavaWeb 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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 += "<tr><td>" + data[i].id + "</td><td>" + data[i].bookName + "</td><td>" + data[i].bookAuthor + "</td><td>" + data[i].bookIsbn + "</td><td>" + data[i].bookPublish + "</td></tr>"
					}
					$("#tbody").show().append(trStr);//向<tbody>内部追加内容
				},
				error : function() {
					alert('请求失败');
				}
			});
		});
	</script>
</body>
</html>