Ajax+Json实现百度自动补全

最新推荐文章于 2022-08-21 16:41:54 发布

小旋风_亮宇

最新推荐文章于 2022-08-21 16:41:54 发布

阅读量304

点赞数

分类专栏： json Ajax

Ajax 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

json

2 篇文章 0 订阅

订阅专栏

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();
        	}
        }
}