使用Servlet响应浏览器的请求，实现Ajax查询等功能
package servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;
import com.alibaba.fastjson.JSON;
@WebServlet("/searchBook")
public class searchBook extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8"); // 设置request字符编码
String searchText = request.getParameter("search"); // 获取传入的search字段的内容
response.setContentType("text/json; charset=utf-8"); // 设置response的编码及格式
PrintWriter out = response.getWriter();
Map<String,Object> resMap = new HashMap<>(); // 使用Map存储键值对
resMap.put("req",searchText); // 向Map对象中添加内容
resMap.put("res",1);
Map<String,Object> subMap = new HashMap<>(); // 创建子键值对
subMap.put("name",'zhangsan');
subMap.put("sex","man");
subMap.put("address","Xi'an");
resMap.put("userInfo",subMap); // 将子键值对置入母键值对
String resJSON = JSON.toJSONString(resMap); // 转换为json
out.print(resJSON); // 输出在实际使用中可添加数据库连接等，从数据库或文件中获取查询结果，并添加到json中返回
在前端，可通过使用jquery调用Ajax，请求json数据并处理。
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/flat-ui.min.css"/>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/flat-ui.min.js"></script>
</head>
<body>
<!--content-->
<div class="container" style="margin-top: 7rem">
<div class="input-group">
<input class="form-control" id="search_input" type="search" placeholder="Search" name="search">
<span class="input-group-btn">
<button type="button" class="btn" id="search_btn"><span class="fui-search"></span></button>
</span>
</div>
<div id="search_res" class="row" style="margin-top: 1.2rem"></div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('#search_input').bind('keypress',function(event){//监听回车事件
if(event.keyCode == "13")
{
$("#search_btn").click();
}
});
$('#search_btn').click(function(){
url = "/searchBook?search=" + document.getElementById("search_input").value; // 获取查询内容拼接url
$.getJSON(url,function(result){ // 调用jquery的getJSON方法Ajax请求资源
var res=eval(result.res); // 获取"res"字段的值
delete result["res"]; // 从JSON删除"res"字段
if(res > 0){
$("#search_res").html("");
$.each(result, function(i, field){
// 遍历剩余JSON对象，取出每个对象中的bookid、picpath、bookname的值，并放入对应div
var bookid = field["bookid"];
var picpath = field["picpath"];
var bookname = field["bookname"];
$("#search_res").append("<div class=\"col-sm-4 col-md-3\">" +
"<div class=\"thumbnail\" >" +
"<a href=\"bookInfo.jsp?bookid="+bookid+"\">" +
"<img alt=\"100%x200\" src=\""+picpath+"\" data-src=\"holder.js/100%x200\" data-holder-rendered=\"false\">" +
"</a>" +
"<div class=\"caption center\">" +
"<h3>"+bookname+"</h3>" +
"<p><a class=\"btn btn-primary btn-block\" role=\"button\" href=\"bookInfo.jsp?bookid="+bookid+"\">查看详情</a></p>" +
"</div>" +
"</div>" +
"</div>");
});
}else if(res == 0){
$("#search_res").html("<a class=\"btn btn-primary btn-block\">查询无结果</a>");
}else{
$("#search_res").html("<a class=\"btn btn-primary btn-block\">请输入查询内容</a>");
}
});
return false;
});
});
</script>
</html>对应的Servlet为：
package servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.HashMap;
import java.util.Map;
import db.DBCPUtils;
import com.alibaba.fastjson.JSON;
@WebServlet("/searchBook")
public class searchBook extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String searchText = request.getParameter("search").toLowerCase(); // 将检索的内容转为小写字符
String func = request.getParameter("func"); // 如果func为category，则只检索对应category的图书
response.setContentType("text/json; charset=utf-8");
PrintWriter out = response.getWriter();
Map<String,Object> resMap = new HashMap<>();
if(searchText == null || "".equals(searchText)){
// 检验searchText如果为空则res为-1报错
resMap.put("res",-1);
}else{
try{
Connection conn = DBCPUtils.getConnection(); // 获取数据库连接
PreparedStatement pstmt = null;
if("category".equals(func)){
// 查询不同类别图书
String sql = "select * from book where category = ?";
pstmt = conn.prepareStatement(sql);
pstmt.setString(1,searchText);
}else{
// 全局检索，book任意字段含查询值均返回结果
String sql = "select * from book " +
"where lower(author) like ? " +
" or lower(bookid) like ? " +
" or lower(bookname) like ? " +
" or lower(pubdate) like ? " +
" or lower(category) like ? " +
" or lower(introduction) like ? " +
" or lower(price) like ? " +
" or lower(picpath) like ?;";
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, "%"+searchText+"%");
pstmt.setString(2, "%"+searchText+"%");
pstmt.setString(3, "%"+searchText+"%");
pstmt.setString(4, "%"+searchText+"%");
pstmt.setString(5, "%"+searchText+"%");
pstmt.setString(6, "%"+searchText+"%");
pstmt.setString(7, "%"+searchText+"%");
pstmt.setString(8, "%"+searchText+"%");
}
ResultSet rs = pstmt.executeQuery();
int rowCount = 0; // 查询结果计数
while(rs.next()){
// 对每个结果创建一个Map对象，存储其详细信息
Map<String,Object> map = new HashMap<>();
map.put("bookid",rs.getString("bookid"));
map.put("bookname",rs.getString("bookname"));
map.put("author",rs.getString("author"));
map.put("pubdate",rs.getString("pubdate"));
map.put("category",rs.getString("category"));
map.put("introduction",rs.getString("introduction"));
map.put("price",rs.getString("price"));
map.put("picpath",rs.getString("picpath"));
// 将单个商品结果JSON置入resMap中
resMap.put(rs.getString("bookid"),map);
rowCount++;
}
// 存入查询到的结果总数
resMap.put("res",rowCount);
// 关闭数据库连接
DBCPUtils.closeAll(rs,pstmt,conn);
} catch (Exception e){
e.printStackTrace();
}
}
// 将resMap转换为JSON
String resJSON = JSON.toJSONString(resMap);
// 输出JSON
out.print(resJSON);
}
}
2902
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
