不要使用 JSP。使用 Servlet 查询数据库，获取List与结果并将其转换为 JS 可以无缝使用的 JSON 字符串。
首先创建一个 javabean 类，它代表 DB 表的一行。例如。Product.
public class Product {
private Long id;
private String name;
private String description;
private BigDecimal price;
// Add/generate c'tors, getters, setters and other boilerplate.
}
创建一个 DAO 类来触发查询并映射ResultSet to a List<Product>.
public class ProductDAO {
// ...
public List<Product> find(String search) throws SQLException {
Connection connection = null;
PreparedStatement statement = null;
ResultSet resultSet = null;
List<Product> products = new ArrayList<Product>();
try {
connection = database.getConnection();
statement = connection.prepareStatement(SQL_FIND);
statement.setString(1, search);
resultSet = statement.executeQuery();
while (resultSet.next()) {
Product product = new Product();
product.setId(resultSet.getLong("id"));
product.setName(resultSet.getString("name"));
product.setDescription(resultSet.getString("description"));
product.setPrice(resultSet.getBigDecimal("price"));
products.add(product);
}
} finally {
if (resultSet != null) try { resultSet.close(); } catch (SQLException logOrIgnore) {}
if (statement != null) try { statement.close(); } catch (SQLException logOrIgnore) {}
if (connection != null) try { connection.close(); } catch (SQLException logOrIgnore) {}
}
return products;
}
}
然后创建一个 Servlet 类，它使用 DAO 类来获取产品，并在以下命令的帮助下将其转换为 JSON 字符串谷歌Gson.
public class ProductServlet extends HttpServlet {
// ...
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
List<Product> products = productDAO.find(request.getParameter("search"));
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(new Gson().toJson(products));
} catch (SQLException e) {
throw new ServletException("DB error", e);
}
}
}
将此 servlet 映射到web.xml on an url-pattern of /products并在 JavaScript 中调用它，如下所示（我正在使用jQuery因为它消除了跨浏览器敏感的样板文件，因此您最终使用的 JavaScript 代码会减少 10 倍）。
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 4407861</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$('#searchform').submit(function() {
$.getJSON("products", $(this).serialize(), function(products) {
var table = $('#resulttable');
$.each(products, function(index, product) {
$('<tr>').appendTo(table)
.append($('<td>').text(product.id))
.append($('<td>').text(product.name))
.append($('<td>').text(product.description))
.append($('<td>').text(product.price));
});
});
return false;
});
});
</script>
</head>
<body>
<form id="searchform">
<input type="text" name="search">
<input type="submit">
</form>
<table id="resulttable"></table>
</body>
</html>
