AJAX 搜索栏站内查询数据

我不是女神ヾ 2022-04-05 13:42 223阅读 0赞

用到bootstrap

Json的转换插件：将java的对象或集合转成json形式字符串

1.  Gson：google
2.  fastjson：阿里巴巴

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTY2Nzcy_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTY2Nzcy_size_16_color_FFFFFF_t_70 1][]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="ISO-8859-1">
    <title>Insert title here</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
    <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    	//2.触发searchWord事件，得到传入的参数值
    	function searchWord(obj) {
    		var word = $(obj).val();
    		var content = "";
    		$.post(
    			//地址URL
    			"${pageContext.request.contextPath}/searchWord", 
    			//输入数据
    			{"word" : word}, 
    			//触发函数
    			function(data) {
    				//当后台response.getWriter().write(data) data有值
    				if (data.length > 0) {
    					//遍历data 得到值    这里得到的：
    					//["vivo X5Pro","vivo X5M","中兴 AXON","三星 Galaxy S5 (G9008W) 闪耀白","sonim XP7700 4G手机","三星 Galaxy Note5（N9200）32G版","三星 Galaxy S6 Edge+（G9280）32G版 铂光金","华硕（ASUS）X450J"]
    					// data[i] 访问数据
    					for (var i = 0; i < data.length; i++) {
    						content += "<div style='padding:5px;cursor:pointer' onclick='clickFn(this)' onmouseover='overFn(this)' onmouseout='outFn(this)'>" + data[i] + "</div>";
    					}
    					//填入内容
    					$("#showDiv").html(content);
    					//将div  display变为block
    					$("#showDiv").css("display","block");
    				}
    			},
    			//得到数据格式为json
    			"json"
    		);
    	}
    	//鼠标移入   div背景变色
    	function overFn(obj){
    		$(obj).css("background","#DBEAF9");
    	}
    	//鼠标移开  div背景变白
    	function outFn(obj){
    		$(obj).css("background","#fff");
    	}
    	//点击div内容  将当前div的值传入di为  search  的input内      并且将div display  变成none消失
    	function clickFn(obj){
    		$("#search").val($(obj).html());
    		$("#showDiv").css("display","none");
    	}
    </script>
    </head>
    <body>
    	<div class="form-group" style="position: relative">
    		
    		<input id="search" type="text" class="form-control" placeholder="Search" onkeyup="searchWord(this)">
    		<div id="showDiv" style="display: none; position: absolute; z-index: 1000; background: #fff; width: 1300px; border: 1px solid #ccc;">
    
    		</div>
    	</div>
    	
    </body>
    </html>

data是后台传来的数据

//获得关键字
    		String word = request.getParameter("word");
    		System.out.println("关键字:"+word);
    		//查询该关键字的所有商品
    		ProductService service = new ProductService();
            //productList 是查询到的对象集合
    		List<Object> productList = null;
    		try {
    			productList = service.findProductByWord(word);
    		} catch (SQLException e) {
    			e.printStackTrace();
    		}
    		
    		JSONArray fromObject = JSONArray.fromObject(productList);
    		String string = fromObject.toString();
    		System.out.println(string);
    		response.setContentType("text/html;charset=UTF-8");
    		
    		response.getWriter().write(string);

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTY2Nzcy_size_16_color_FFFFFF_t_70]: /images/20220405/cf514132d83843958147e7eda2048ba2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTY2Nzcy_size_16_color_FFFFFF_t_70 1]: /images/20220405/feaacdd01b37496293cdb464aff718b9.png