案例：Ajax站内搜索

来源：互联网发布：航天开票软件升级编辑：程序博客网时间：2024/05/22 16:52

页面及前端处理代码：

<form class="navbar-form navbar-right" role="search"><div class="form-group" style="positon:relative"><!-- relative:相对定位  absolute:绝对定位--><input type="text" id="search" class="form-control" placeholder="Search" onkeyup="searchWord(this)"><div id="showDiv" style=" display:none;position:absolute;z-index:1000;background:#fff;width:185px;height:150px;border:1px solid #ccc"></div></div><button type="submit" class="btn btn-default">Submit</button></form><!-- 完成异步搜索功能 --><script type="text/javascript">function overFn(obj){$(obj).css("background","#DBEAF9");}function outFn(obj){$(obj).css("background","#fff");}function clickFn(obj){$("#search").val($(obj).html());$("#showDiv").css("display","none");}function searchWord(obj){//1.获得输入框的输入的内容var word = $(obj).val();//2.根据输入框的内容去数据库中模糊查询---List<Product>var content = "";$.post("${pageContext.request.contextPath}/SearchWordServlet",{"word":word},function(data){if(data.length>0){for(var i=0;i<data.length;i++){//将返回的商品名称，显示在showDiv中content+="<div style='padding:5px;cursor:pointer' onclick='clickFn(this)' onmouseover='overFn(this)' onmouseout='outFn(this)'>"+data[i].pname+"</div>"}$("#showDiv").html(content);$("#showDiv").css("display","block");}},"json");}</script>

web层：

public class SearchWordServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1.获得关键字String word = request.getParameter("word");//2.查询关键字的所有商品ProductService service = new ProductService();List<Product> productList = null;try {productList = service.findProductByWord(word);} catch (SQLException e) {e.printStackTrace();}/*//3.使用json的转换工具将对象或集合转成json格式的字符串JSONArray fromObject = JSONArray.fromObject(productList);String str = fromObject.toString();System.out.println(str);*/Gson gson = new Gson();String json = gson.toJson(productList);System.out.println(json);response.setContentType("text/html;charset=UTF-8");response.getWriter().write(json);}public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}}

service层：

//根据关键字查询商品public List<Product> findProductByWord(String word) throws SQLException {ProductDao dao = new ProductDao();return dao.findProductByWord(word);}

dao层：

//根据关键字查询商品public List<Product> findProductByWord(String word) throws SQLException {QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());String sql = "select * from product where pname like ? Limit 0,8";List<Product> productList = runner.query(sql, new BeanListHandler<Product>(Product.class), "%"+word+"%");return productList;}

阅读全文

0 0