Ajax进阶篇(三)——使用jQuery实现异步校验用户名与仿百度搜索提示

╰+攻爆jí腚メ 2021-12-14 05:07 211阅读 0赞

# 使用jQuery实现异步校验用户名 #

在这篇[《Ajax进阶篇(一)——异步校验用户名》][Ajax]文章中，我们就已经实现了异步校验用户名这个需求，只不过是没有使用jQuery而已，现在我们使用jQuery的方式来实现同样的需求。  
这里，只需要修改用户注册页面即可，改用jQuery的方式发送post请求。所以，register.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">
    <title>Insert title here</title>
    
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    
    <script type="text/javascript"> function checkUsername() { //1. 获取输入框的内容 var name = $("#name").val(); //2. 发送请求 $.post("/AjaxProject/CheckUsernameServlet", { name:name}, function(data, status) { //alert(data); //3. 输出响应的数据到页面上 if (data == 1) { //用户名已存在 //alert("用户名已存在"); $("#span01").html("<font color='red'>用户名已被注册</font>"); } else { //alert("用户名可用"); $("#span01").html("<font color='green'>用户名可以使用</font>"); } }); } </script>
    </head>
    <body>
    	<table border="1" width="500">
    		<tr>
    			<td>用户名:</td>
    			<td><input type="text" name="name" id="name" onblur="checkUsername()" /><span id="span01"></span></td>
    		</tr>
    		<tr>
    			<td>密码</td>
    			<td><input type="text" name=""></td>
    		</tr>
    		<tr>
    			<td>邮箱</td>
    			<td><input type="text" name=""></td>
    		</tr>
    		<tr>
    			<td>简介</td>
    			<td><input type="text" name=""></td>
    		</tr>
    		<tr>
    			<td colspan="2"><input type="submit" value="注册"></td>
    		</tr>
    	</table>
    </body>
    </html>

相比早前我们使用Ajax去执行post请求而言，少写了很多代码，并且效率还高点。

# 仿百度搜索提示 #

我们接触最多的、用的最多的搜索引擎就是百度了，可以说现在我们的生活如果离开像百度、谷歌这样的搜索引擎，我们的生活会很不方便。我们在使用的时候都有一个体验就是我们在输入关键字的时候，他会自动给我们匹配很多的关键字，像下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70]  
这种非常人性化的功能对于我们在平常开发软件的时候是非常有必要借鉴的，所以在这里我就模仿百度搜索提示也做一个这样子的东西。必备的知识可能是jQuery+Ajax，因为这需要频繁的刷新网页，因为我们在输入框中内容发生改变的时候，下拉框中的内容是需要改变的，下面我就给大家分享一下我的实现代码和思路。

## 搭建环境 ##

新建一个动态Web项目，比如baidu。接着导入该项目所须的jar包：

*  mysql-connector-java-5.1.38-bin.jar：MySQL数据库驱动包；
 *  c3p0-0.9.1.2.jar：Java配置C3P0数据库连接池使用的包；
 *  commons-dbutils-1.4.jar：Apache组织提供的一个开源JDBC工具类库；
 *  jstl.jar和standard.jar：JSTL标签库和EL表达式依赖包。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 1]  
然后在WebContent根目录下创建一个baidu.jsp页面，其内容如下：

使用Google Chrome浏览器访问以上页面，效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 2]  
注意，千万不要忘了在项目中导入jQuery的支持，所以应在WebContent根目录下新建一个js目录，并在该目录下导入jQuery的支持，如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 3]  
最后，需要在MySQL数据库中新建一个baidu数据库，并在该数据库中新建一个words表，表中记录类似如下：  
![在这里插入图片描述][20190708112340674.png]  
由于建库建表语句非常简单，所以这里我就省略不写了。

## 使用jQuery实现仿百度搜索提示 ##

开发环境搭建好了之后，接下来我们就要编写程序，实现仿百度搜索提示这个需求了。

### 开发domain层 ###

在com.meimeixia.domain包中创建一个封装关键字信息的实体JavaBean。

package com.meimeixia.domain;
    
    public class WordBean { 
    
    	private int id;
    	private String words;
    	
    	public WordBean() { 
    		super();
    	}
    
    	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 + "]";
    	}
    	
    }

### 开发数据访问层(dao、dao.impl) ###

为了提升程序的数据库访问性能，我们通常应在项目开发中使用C3P0数据源。所以应在类目录下加入C3P0的配置文件：c3p0-config.xml。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 4]  
c3p0-config.xml配置文件的内容如下：

<?xml version="1.0" encoding="UTF-8"?>
    <c3p0-config>
    	
    	<default-config>
    		<property name="driverClass">com.mysql.jdbc.Driver</property>
    		<property name="jdbcUrl">jdbc:mysql://localhost:3306/baidu</property>
    		<property name="user">root</property>
    		<property name="password">liayun</property>
    
    		<property name="initialPoolSize">10</property>
    		<property name="maxIdleTime">30</property>
    		<property name="maxPoolSize">100</property>
    		<property name="minPoolSize">10</property>
    		<property name="maxStatements">200</property>
    	</default-config>
    
    	<named-config name="oracle">
    		<property name="acquireIncrement">50</property>
    		<property name="initialPoolSize">100</property>
    		<property name="minPoolSize">50</property>
    		<property name="maxPoolSize">1000</property>
    
    		
    		<property name="maxStatements">0</property>
    		<property name="maxStatementsPerConnection">5</property>
    
    		
    		<user-overrides user="master-of-the-universe">
    			<property name="acquireIncrement">1</property>
    			<property name="initialPoolSize">1</property>
    			<property name="minPoolSize">1</property>
    			<property name="maxPoolSize">5</property>
    			<property name="maxStatementsPerConnection">50</property>
    		</user-overrides>
    	</named-config>
    </c3p0-config>

也是为了简化JDBC的开发，我们使用Apache组织提供的一个开源JDBC工具类库——commons-dbutils-1.4.jar。然后在com.meimeixia.util包下创建一个工具类——JDBCUtil02.java，用于读取C3P0的xml配置文件创建数据源，该工具类的具体代码如下：

package com.meimeixia.util;
    
    import java.sql.Connection;
    import java.sql.ResultSet;
    import java.sql.SQLException;
    import java.sql.Statement;
    
    import javax.sql.DataSource;
    
    import com.mchange.v2.c3p0.ComboPooledDataSource;
    
    public class JDBCUtil02 { 
    	static ComboPooledDataSource dataSource = null;
    	
    	static { 
    		dataSource = new ComboPooledDataSource();
    	}
    	
    	public static DataSource getDataSource() { 
    		return dataSource;
    	}
    	
    	/** * 获取连接对象 * @return * @throws SQLException */
    	public static Connection getConn() throws SQLException{ 
    		return dataSource.getConnection();
    	}
    	
    	/** * 释放资源 * @param conn * @param st * @param rs */
    	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;
    		}
    	}
    }

准备好以上这些工作之后，我们正式步入开发数据库访问层的阶段。在com.meimeixia.dao包下创建一个WordsDao接口，该接口的具体代码如下：

package com.meimeixia.dao;
    
    import java.sql.SQLException;
    import java.util.List;
    
    import com.meimeixia.domain.WordBean;
    
    public interface WordsDao { 
    	
    	List<WordBean> findWords(String word) throws SQLException;
    	
    }

紧接着在com.meimeixia.dao.impl包中新建WordsDao接口的实现类，即WordsDaoImpl类，该实现类的代码如下：

package com.meimeixia.dao.impl;
    
    import java.sql.SQLException;
    import java.util.List;
    
    import org.apache.commons.dbutils.QueryRunner;
    import org.apache.commons.dbutils.handlers.BeanListHandler;
    
    import com.meimeixia.dao.WordsDao;
    import com.meimeixia.domain.WordBean;
    import com.meimeixia.util.JDBCUtil02;
    
    public class WordsDaoImpl implements WordsDao { 
    
    	@Override
    	public List<WordBean> findWords(String word) throws SQLException { 
    		QueryRunner runner = new QueryRunner(JDBCUtil02.getDataSource());
    		String sql = "select * from words where words like ? limit ?";//limit：限定只返回前面5个就行了
    		return runner.query(sql, new BeanListHandler<WordBean>(WordBean.class), word + "%", 5);
    	}
    
    }

### 开发web层 ###

当我们在搜索框中输入关键字后，会发送一个请求给服务器端，该请求会交给一个Servlet进行处理。于是，我们要在com.meimeixia.servlet中新建一个FindWordsServlet，用于处理请求，并返回匹配的关键字列表。

package com.meimeixia.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.meimeixia.dao.WordsDao;
    import com.meimeixia.dao.impl.WordsDaoImpl;
    import com.meimeixia.domain.WordBean;
    
    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);
    			}
    			
    			request.setAttribute("list", list);
    			
    			//3. 返回数据
    			response.setContentType("text/html;charset=UTF-8");
    			//response.getWriter().write("数据是：");
    			request.getRequestDispatcher("list.jsp").forward(request, response);
    		} catch (SQLException e) { 
    			e.printStackTrace();
    		}
    	}
    
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
    		doGet(request, response);
    	}
    
    }

紧接着，我们要在WebContent根目录下创建一个list.jsp页面，用于展示返回的匹配关键字列表。

<%@ 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">
    		<tr>
    			<td>${wordBean.words }</td>
    		</tr>
    	</c:forEach>
    </table>

当我们在baidu.jsp页面中的搜索框中键入关键字后，需要捕捉到键盘弹起的事件，即对代表搜索框的元素进行onkeyup事件监听，然后获取到搜索框中的值，以此作为异步post请求的参数，请求发出去之后，获取服务器端返回的匹配关键字列表信息进行展示。所以，baidu.jsp页面的内容要修改为：

记住千万不要忘了导入jQuery的支持。其中WebContent根目录下的js目录中的baidu.js文件的内容如下：

//1. 捕捉到键盘弹起的事件
    //在文档准备就绪的时候，对某一个元素进行onkeyup事件监听
    /*$(document).ready(function() { });*/
    $(function() { 
    	$("#word").keyup(function() { 
    		//alert("键盘弹起了...");
    		
    		//2. 获取输入框的值
    		//var word = $("word").val();
    		//this对应的就是执行这个方法的那个对象，即$("word")
    		var word = $(this).val();
    		//alert(word);
    		
    		if (word == "") { 
    			$("#div01").hide();
    		} else { 
    			//3. 请求数据
    			$.post("FindWordsServlet", { word:word}, function(data, status) { 
    				//alert(data);
    				$("#div01").show();
    				$("#div01").html(data);
    			});
    		}
    		
    	})
    });

最后，在Google Chrome浏览器中测试的效果如下：  
![在这里插入图片描述][20190708112411680.gif]

[Ajax]: https://blog.csdn.net/yerenyuan_pku/article/details/95039427
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70]: /images/20211213/665cf8684af34139952774241cab713c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 1]: /images/20211213/9e83f557b2b548008bc4092058ea77bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 2]: /images/20211213/0d738c4d19824a239938153616f9621f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 3]: /images/20211213/5cc9e63d581c47fbb115aa8adc9f19ab.png
[20190708112340674.png]: /images/20211213/8462530699c0409894bf5c569c685016.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 4]: /images/20211213/cbedc13315d6406bb7fd389f030dec9c.png
[20190708112411680.gif]: /images/20211213/44942e2989df45e685aa80951b859b75.png