AJAX 搜索栏站内查询数据

最新推荐文章于 2022-03-27 15:52:36 发布

崔西儿

最新推荐文章于 2022-03-27 15:52:36 发布

阅读量292

点赞数

分类专栏：前端文章标签： AJAX

本文链接：https://blog.csdn.net/qq_41566772/article/details/84977459

版权

前端专栏收录该内容

17 篇文章 1 订阅

订阅专栏

用到bootstrap

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

Gson：google
fastjson：阿里巴巴

<%@ 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">
		<!--1.用 onkeyup事件绑定searchWord（），当键入内容，触发searchWord函数 -->
		<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>
	<!-- /input-group -->
</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);

崔西儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX 搜索栏站内查询数据

用到bootstrapJson的转换插件：将java的对象或集合转成json形式字符串Gson：google fastjson：阿里巴巴 &lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;&lt;!DOCTYPE html&gt;&l...
复制链接

扫一扫