Ajax+Json實現百度自動補全
阿新 • • 發佈：2018-12-17
search.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'search.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <style type="text/css"> #content{margin:0 auto; width: 822px; margin-top: 200px; } #search{height: 60px; width: 700px;margin: 0px;font-size: 30px;padding-left: 5px} #btn{font-size: 30px;height: 61px; width:108px; padding:5px 5px} #mess{width: 700px;font-size: 30px;} </style> </head> <body> <div id="content"> <div id="middle"> <input type="text" id="search" autocomplete="off" > <input id="btn" type="button" value="search"> </div> <div id="mess" style="padding-left: 1px"></div> </div> </body> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ $("#search").keyup(function(){ var name = $(this).val(); if(name==''){ return; } $("#mess").css("display","");//mess顯示 $.ajax({ url:"book",//請求的地址 type:"post",//請求方式 dataType:"text",//資料傳輸的格式 data:{"name":name},//傳輸的資料 success:function(ret){//處理成功的回撥函式 $("#mess").html("");//清空div var arr = ret.split(","); for(var i=0;i<arr.length-1;i++){ $("#mess").append("<div onmouseover='mouseover(this)' onmouseout='mouseout(this)' onclick='cli(this)'>"+arr[i]+"</div>"); } }, error:function(){//處理失敗的回撥函式 alert("請求異常"); } }); }); }); function mouseover(t){ t.style.backgroundColor="red"; } function mouseout(t){ t.style.backgroundColor="white"; } function cli(t){ var value = t.innerHTML; $("#search").val(value); $("#mess").css("display","none");//mess隱藏 } </script> </html>
BookServlet_json.java
@WebServlet("/book_json") public class BookServlet_json extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { try{ request.setCharacterEncoding("UTF-8"); response.setCharacterEncoding("UTF-8"); String name = request.getParameter("name"); String sql="select name from tb_book where name like '%"+name+"%'"; JdbcUtil jdbc = new JdbcUtil(); ResultSet rs = jdbc.query(sql, null); List list = new ArrayList(); while(rs.next()){ //list.add(new Book(rs.getString(1))); list.add(rs.getString(1)); } /** * {"name":"zhangsan","age":20} * [{"name":"zhangsan","age":20},{"name":"lisi","age":25}] * ["zhangsan","lisi"] */ JSONArray json = JSONArray.fromObject(list); System.out.println(json); response.getWriter().print(json); jdbc.close(); }catch(Exception e){ } } }
普通非json則： BookServlet.java
@WebServlet("/book") public class BookServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { try{ request.setCharacterEncoding("UTF-8"); response.setCharacterEncoding("UTF-8"); String name = request.getParameter("name"); String sql="select name from tb_book where name like '%"+name+"%'"; //JdbcUtil是自寫工具類 JdbcUtil jdbc = new JdbcUtil(); ResultSet rs = jdbc.query(sql, null); String names = ""; while(rs.next()){ names+=rs.getString(1)+","; } response.getWriter().print(names); jdbc.close();//關閉jdbc，否則會報資料庫連線用完 }catch(Exception e){ e.printStackTrace(); } } }