JQuery仿百度搜索

一、建数据库和jsp页面

新建的jsp页面：写一个输入框一个按钮一个下拉div表

1
2
3
4
5
<body>
	<input type="text" name="word" id="word" style="width:700px ; height:50px">
	<input type="button" value="查询" style="width:100px ; height:50px">
	<div id="div01" style="width:700px ; height:200px ; border:1px solid blue ; display:none"></div>
</body>

新建的数据库

二、 前期准备#

1.导入jar文件

2.导入数据池的xml配置文件并且更改数据库名字

3.导入所需要的的JDBCUtil02类

4.导入之前ajax写验证用户名时候的dao和impl类进行修改

三、 书写Servlet的前两步操作#

1
2
3
4
5
6
7
8
//1.获取参数
String word=request.getParameter("word");

//2.让dao实现
WordsDao dao=new WordsDaoImpl();
List<WordBean> list = dao.findWords(word);

//3.返回数据

四、 写jsp页面代码

导入jq包和heima.js文件(所有操作放里面写)

1
2
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/heima.js"></script>

五、写heima.js文件

要使用固定格式和JSTL格式(导入jar包)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//捕捉弹起事件  对一个元素进行onkeyup事件监听
		// 格式：$(document).reday(function(){})	

$(function(){
	$("#word").keyup(function(){
		//2. 获取输入框的值
			//var word=$("#word").val();
			var word=$(this).val();
		
			if(word == "")   //查询的为0
			{
				$("#div01").hide();
			}		
			else  //查询东西要匹配 
			{
				//3. 请求数据。
				$.post("/day16_02/FindWordsServlet",{word:word},function(data,status){
					//alert(data);
					$("#div01").show();
					$("#div01").html(data);
				});
			}	
	})
});

六、书写servlet第三步

让servlet跳到list.jsp页面：

1
2
3
4
5
6
//数据存到作用域(因为list.jsp用了JSTL)
				request.setAttribute("list",list);
				
//3.返回数据
		response.setContentType("text/html;charset=utf-8");	
				request.getRequestDispatcher("list.jsp").forward(request, response);  //跳转到list.jsp页面

list.jsp页面(用JSTL去遍历出来)：

1
2
3
4
5
6
7
8
9
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>

<table style="width: 100%">
	<c:forEach items="${list}" var="wordBean">  <!--一定要去servlet里面将数据存到作用域-->
		<tr>
			<td>${wordBean.words}</td>
		</tr>
	</c:forEach>
</table>

七、代码分析

代码框架：

分析代码流程：

八、具体代码

dao类代码：

1
2
3
4
public interface WordsDao {
	 //假如传入一个a   ---> 返回 aa  abc等    --->   所以要用list集合
		List<WordBean> findWords(String word) throws SQLException;
}

daoImpl类代码：

1
2
3
4
5
6
7
8
9
10
public class WordsDaoImpl implements WordsDao {
	@Override
	public List<WordBean> findWords(String word) throws SQLException {
		//1.使用DBUtils的对象
		QueryRunner runner=new QueryRunner(JDBCUtil02.getDataSource());
		
		//2.调用简便方法
		String sql="select * from words where words like ? limit ?";  //模糊查询  限制只能查出5个
		return runner.query(sql, new BeanListHandler<WordBean>(WordBean.class),word+"%",5);		
	}

Servlet类代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
public class FindWordsServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//有中文
			request.setCharacterEncoding("utf-8");
		try {
				//1.获取参数
				String word=request.getParameter("word");
				System.out.println("word="+word);  //控制台输出 看我输入的是不是被抓过来了

				//2.让dao实现
				WordsDao dao=new WordsDaoImpl();
				List<WordBean> list = dao.findWords(word);
				
				//循环输出满足条件的结果
				for (WordBean wordBean : list) {
					System.out.println("==="+wordBean.toString());
				}
								
				//数据存到作用域
				request.setAttribute("list",list);
				
				//3.返回数据
				response.setContentType("text/html;charset=utf-8");	
				request.getRequestDispatcher("list.jsp").forward(request, response);  //跳转到list.jsp页面
				
			} catch (SQLException e) {
				// TODO 自动生成的 catch 块
				e.printStackTrace();
			}
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

domain获取数据库属性类代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

public class WordBean {

	private int id;
	private String words;

	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getWords() {
		return words;
	}
	public void setWords(String words) {
		this.words = words;
	}
	
	@Override
	public String toString() {
		return "WordBean [id=" + id + ", words=" + words + "]";
	}
	
}

heima.js文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//捕捉弹起事件  对一个元素进行onkeyup事件监听
		// 格式：$(document).reday(function(){})	

$(function(){
	$("#word").keyup(function(){
		//2. 获取输入框的值
			//var word=$("#word").val();
			var word=$(this).val();
		

			if(word == "")   //查询的为0
			{
				$("#div01").hide();
			}		
			else  //查询东西要匹配 
			{
				//3. 请求数据。
				$.post("/day16_02/FindWordsServlet",{word:word},function(data,status){
					//alert(data);
					$("#div01").show();
					$("#div01").html(data);
				});
			}	
	})
});

主页demo08.jsp页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<%@ 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">
<title>Insert title here</title>

	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="js/heima.js"></script>
</head>

<body>
<center> <!-- 居中-->
<h2>黑马</h2>
	<input type="text" name="word" id="word" style="width: 600px ; height: 50px  ;font-size: 20px;">
	<input type="button" value="黑马一下"  style="height: 55px ; width: 100px ;">
	
	<div id="div01" style="position:relative; left:-54px; width:600px; height:200px ; border:1px solid blue; display: none"></div>
</center>
</body>
</html>

list.jsp展示页面：

1
2
3
4
5
6
7
8
9
10
11
12
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>


<table style="width: 100%">
	<c:forEach items="${list}" var="wordBean">  <!--一定要去servlet里面将数据存到作用域-->
		<tr>
			<td>${wordBean.words}</td>
		</tr>
	</c:forEach>
</table>

JDBCUtil02类(获取数据池对象)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
public class JDBCUtil02 {
	
	static ComboPooledDataSource dataSource = null;   //使用c3p0开源数据连接池的类
	static{
		dataSource = new ComboPooledDataSource();
	}
	
	public static DataSource getDataSource(){
		return dataSource;                      //返回一个dataSource 方便获取
	}
		
	/*
	 * 获取连接对象
	 */
	public static Connection getConn() throws SQLException{
		return dataSource.getConnection();        //返回一个连接
	}
	
	/*
	 * 释放资源
	 */
	public static void release(Connection conn , Statement st , ResultSet rs){
		closeRs(rs);
		closeSt(st);
		closeConn(conn);
	}
	public static void release(Connection conn , Statement st){
		closeSt(st);
		closeConn(conn);
	}

	
	private static void closeRs(ResultSet rs){
		try {
			if(rs != null){
				rs.close();
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}finally{
			rs = null;
		}
	}
	
	private static void closeSt(Statement st){
		try {
			if(st != null){
				st.close();
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}finally{
			st = null;
		}
	}
	
	private static void closeConn(Connection conn){
		try {
			if(conn != null){
				conn.close();
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}finally{
			conn = null;
		}
	}
}

最终结果展示：

赏

×

纯属好玩

扫码支持
扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

本文标题:JQuery仿百度搜索

文章作者:Larkkkkkkk

发布时间:2020年03月06日 - 16时31分

最后更新:2020年03月06日 - 22时51分

原始链接:https://larkkkkkkk.github.io/2020/03/06/JQuery%E4%BB%BF%E7%99%BE%E5%BA%A6%E6%90%9C%E7%B4%A2/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。

文章目录
  1. 1. 一、建数据库和jsp页面
  2. 2. 二、 前期准备#
  3. 3. 三、 书写Servlet的前两步操作#
  4. 4. 四、 写jsp页面代码
  5. 5. 五、写heima.js文件
  6. 6. 六、书写servlet第三步
  7. 7. 七、代码分析
  8. 8. 八、具体代码
,