Не используйте JSP.Используйте сервлет, который запрашивает БД, получает List с результатами и преобразует его в строку JSON, которую JS может беспрепятственно использовать.
Сначала создайте класс javabean, который представляет одну строку таблицы БД.Например, 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 в 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;
}
}
. Затем создайте класс сервлета, которыйиспользует класс DAO для получения продуктов и преобразует его в строку JSON с небольшой помощью: Google 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);
}
}
}
Отобразить этот сервлет в web.xml на url-patternиз /products и вызовите его в JavaScript следующим образом (я использую jQuery , поскольку он устраняет перекрестно-чувствительный шаблон, так что в итоге вы получите в 10 раз меньше кода JavaScript).
<!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>