根据视频编写的简单搜索框,使用jquery+ajax实现的简单搜索框
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function() {
//文本框keyup的时候发送ajax
$("#tid")
.keyup(
function() {
//获取文本框的值
var $value = $(this).val();
//内容为空的时候不发送ajax
if ($value != null && $value != '') {
//清空div
$("#did").html("");
//写入自己的项目路径和servlet
$.post("/day08/search","kw=" + $value,function(d) {
//不为空的时候切割字符串
if (d != '') {
var arr = d.split(",");
$(arr).each(function(){
//alert(this);
//可以将每一个值放入一个div 将其内部插入到id为did的div中
$("#did").append($("<div style='text-align:left;'>"+ this+ "</div>"));
});
//将div显示
$("#did").show();
}
});
} else {
//内容为空的时候 将div隐藏
$("#did").hide();
}
});
})
</script>
</head>
<body>
<center>
<div>
<h2>书籍搜索</h2>
<div width="150px">
<input type="text" name="kw" id="tid"> <input type="button"
value="搜索">
</div>
<div id="did"
style="border: 1px solid black;width: 143px;position: relative;
left: -25px;display: none"></div>
</div>
</center>
</body>
</html>
SearchServlet.java
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;
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.DC.service.SearchKwService;
public class SearchServlet extends HttpServlet {
protected void service(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// 设置编码
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
// 设置查询
String kw = request.getParameter("kw");
// 接受查询数据
List<Object> list = null;
try {
list = new SearchKwService().findKw(kw);
} catch (SQLException e) {
e.printStackTrace();
}
// 判断链表是否为空
if (list != null && list.size() > 0) {
// 将链表中的值转换成字符串
String s = list.toString();
// 链表转换成字符会有前后中括号,所以切割中间部分;
s = s.substring(1, s.length() - 1);
// System.out.println(s);
response.getWriter().println(s);
}
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
}
}
SearchService.java
import java.sql.SQLException;
import java.util.List;
import com.DC.dao.SearchKwDao;
public class SearchKwService {
//查找字符
public List<Object> findKw(String kw) throws SQLException {
return new SearchKwDao().findKw(kw);
}
}
SearchDao.java
import java.sql.SQLException;
import java.util.List;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import org.apache.commons.dbutils.handlers.ColumnListHandler;
import com.DC.utils.DataSourceUtils;
public class SearchDao {
public List<Object> findKw(String kw) throws SQLException {
QueryRunner qr = new QueryRunner(DataSourceUtils.getDataSource());
//限制5个搜索数,设置要查找的表和列
String sql = "select * from XXX where xx like ? limit 5";
//ColumnListHandler:将某列的值封装到List集合中,例如一列name属性等
//采用模糊查找
return qr.query(sql, new ColumnListHandler("kw"), "%"+kw+"%");
}
}