使用Ajax和json实现类似于百度的模糊搜索，附谷歌的Gson.jar包

最新推荐文章于 2022-05-19 02:43:17 发布

Exception.

最新推荐文章于 2022-05-19 02:43:17 发布

阅读量267

点赞数

分类专栏： java学习笔记

本文链接：https://blog.csdn.net/qq_43122641/article/details/88541766

版权

java学习笔记专栏收录该内容

57 篇文章 1 订阅

订阅专栏

jsp界面源码，这里给了个超链接到了外网

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script>
 <script type="text/javascript">
	$(function() {
		/* 获取按钮的id选择键盘弹起事件 */
		$("#tid").keyup(function () {
			/*清空搜索栏的数据  */
			$("#did").html("");
			
			/* 发送Ajax */
			$.post("${pageContext.request.contextPath}/kw","kname="+$("#tid").val(),function(obj){ 
				/* 从前台获取到的值 */
				/*如果obj里面有值  */
				if (obj!="") {
					/* 把obj转换为JQuery类型遍历出来 */
					$(obj).each(function () {
						/*放入did中，并且展示出来  并且添加鼠标移入和移出事件 */
						$("#did").append("<div id='intext' onmouseover='over(this)' onmouseout='out(this)'>"+this+"</div>");
						$("#did").show();
					})
						$("#intext").click(function () {
							var text=$(this).text()
							$("#tid").val(text);
							$("#did").css("display","none");
						})
				}else  {
					$("#did").append("<font>数据库没有数据</font>");
					$("#did").show();
				}
			},"json");/* 返回的是json的值 */
		})
		$("#tid").val("");
	})
</script>
<style type="text/css">
	#imgid{
	margin:100px;
	} 
	#did{
	border: 1px solid black;
	width: 171px;
	left:645px;
	display:none;
	position:fixed;
	}
</style> 
<title>Insert title here</title>
</head>
<body>
	<center>
		<div>
			<h1>蜂巢搜索</h1>
			<div>
				<input  type="text" name="kw" id="tid">
				<a href="https://en.wikipedia.org/wiki/Java">
				<input type='button' value='搜索一下'>
				</a>
			</div>
			<div id="did" ></div>
			<img id="imgid" src="${pageContext.request.contextPath}/img/java.png">
		</div> 
	</center>
</body>
<script type="text/javascript">
	function over(obj) {
		$(obj).css("background-color","gray");
	}
	function out(obj){
		$(obj).css("background-color","white");
	}
	
</script>
</html>

java的servlet类，这里我使用的是谷歌的gson来传递数据的

package com.it.servlet;

import java.io.IOException;
import java.sql.SQLException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;
import com.it.service.KwService;
import com.it.service.UserService;

public class KwServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
			//解决乱码问题
			request.setCharacterEncoding("utf-8");
			response.setContentType("text/html;charset=utf-8");
			try {
				//获取前台录入的数据
				String kw = request.getParameter("kname");
				//调用service
				KwService ks = new KwService();
				List<Object> list= ks.findList(kw);
				//把list转换为json
				Gson g=new Gson();
				String json = g.toJson(list);
				//写回浏览器
				response.getWriter().print(json);
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

service层

package com.it.service;

import java.sql.SQLException;
import java.util.List;

import com.it.dao.KwDao;

public class KwService {

	public List<Object> findList(String kw) throws SQLException {
		KwDao kd=new KwDao();
		
		return kd.findList(kw);
	}



}

dao层

package com.it.dao;

import java.sql.SQLException;
import java.util.List;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.ColumnListHandler;

import com.it.utils.DataSourceUtils;

import javafx.scene.layout.ColumnConstraints;

public class KwDao {

	public List<Object> findList(String kw) throws SQLException {
		QueryRunner qr=new QueryRunner(DataSourceUtils.getDataSource());
		String sql="select kwname from kw where kwname like  ? limit 0,4";
		List<Object> list = qr.query(sql, new ColumnListHandler(),"%"+kw+"%");
		return list;
	}

}

Gson：链接：https://pan.baidu.com/s/1lt__yr5rSHmwKWyCwAn2QQ
提取码：m0gn
复制这段内容后打开百度网盘手机App，操作更方便哦

Exception.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用Ajax和json实现类似于百度的模糊搜索，附谷歌的Gson.jar包

jsp界面源码，这里给了个超链接到了外网&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.o
复制链接

扫一扫