数据库连接信息
driver=com.mysql.jdbc.Driver //数据库连接驱动
url=jdbc:mysql://127.0.0.1:3306/searchofkeyword?useUnicode=true&characterEncoding=utf-8 //连接url
user=root //账户名
password=root //密码mybatis配置信息
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd"> <!-- 通过这个配置文件完成mybatis与数据库的连接 --> <configuration> <!-- 引入 database.properties 文件--> <properties resource="database.properties"/> <!--类型别名--> <typeAliases> <package name="cn.pojo"/> </typeAliases> <environments default="development"> <environment id="development"> <!--配置事务管理,采用JDBC的事务管理 --> <transactionManager type="JDBC"></transactionManager> <!-- POOLED:mybatis自带的数据源,JNDI:基于tomcat的数据源 --> <dataSource type="POOLED"> <property name="driver" value="${driver}"/> <property name="url" value="${url}"/> <property name="username" value="${user}"/> <property name="password" value="${password}"/> </dataSource> </environment> </environments> <!-- 将mapper文件加入到配置文件中 --> <mappers> <mapper resource="cn/dao/SearchDaoMapper.xml"/> </mappers> </configuration>
Dao层
package cn.dao; import java.util.List; import cn.pojo.search; public interface ISearchDao { /** * 查询全部 * @param name * @return */ List<search> getList(); }
Mapper映射文件
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="cn.dao.ISearchDao"> <select id="getList" resultType="search" > select name from search </select> </mapper>
pojo
package cn.pojo; public class search { private Integer id; private String name; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } }
service及实现类
package cn.service; import java.util.List; import cn.pojo.search; public interface ISearchService { /** * 查询全部 * @param name * @return */ List<search> getList(); }
package cn.service.impl; import java.util.List; import cn.dao.ISearchDao; import cn.pojo.search; import cn.service.ISearchService; import cn.utils.MyBatisUtil; public class ISearchServiceImpl implements ISearchService { @Override public List<search> getList() { List<search> list = MyBatisUtil.getSqlSession().getMapper(ISearchDao.class).getList(); return list; } }
servlet
package cn.servlet; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import cn.pojo.search; import cn.service.impl.ISearchServiceImpl; import net.sf.json.JSONArray; public class SearchServlet extends HttpServlet { //static List<String> datas = new ArrayList<String>(); /*static{ datas.add("ajax"); datas.add("ajax-post"); datas.add("beel"); datas.add("colection"); datas.add("cav"); }*/ private ISearchServiceImpl issi = new ISearchServiceImpl(); List<search> datas = issi.getList(); public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); request.setCharacterEncoding("utf-8"); PrintWriter out = response.getWriter(); //1.获得前台传输的关键字 String keyword = request.getParameter("keyword"); //2.处理数据 List<String> listdata = getDatas(keyword); //3.返回json格式 //System.out.println(JSONArray.fromObject(listdata).toString()); response.getWriter().write(JSONArray.fromObject(listdata).toString()); out.flush(); out.close(); } public List<String> getDatas(String keyword) { List<String> list = new ArrayList<String>(); for (search da : datas) { if (da.getName().contains(keyword)) { list.add(da.getName()); } } return list; } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
mybatisUtils
package cn.utils; import java.io.IOException; import java.io.Reader; import org.apache.ibatis.io.Resources; import org.apache.ibatis.session.SqlSession; import org.apache.ibatis.session.SqlSessionFactory; import org.apache.ibatis.session.SqlSessionFactoryBuilder; /** * 工具类 */ public class MyBatisUtil { private static ThreadLocal<SqlSession> threadLocal = new ThreadLocal<SqlSession>(); private static SqlSessionFactory sqlSessionFactory; /** * 加载位于src/mybatis-config.xml配置文件 */ static{ try { Reader reader = Resources.getResourceAsReader("mybatis-config.xml"); sqlSessionFactory = new SqlSessionFactoryBuilder().build(reader); } catch (IOException e) { e.printStackTrace(); throw new RuntimeException(e); } } /** * 禁止外界通过new方法创建 */ private MyBatisUtil(){} /** * 获取SqlSession */ public static SqlSession getSqlSession(){ //从当前线程中获取SqlSession对象 SqlSession sqlSession = threadLocal.get(); //如果SqlSession对象为空 if(sqlSession == null){ //在SqlSessionFactory非空的情况下,获取SqlSession对象 sqlSession = sqlSessionFactory.openSession(); //将SqlSession对象与当前线程绑定在一起 threadLocal.set(sqlSession); } //返回SqlSession对象 return sqlSession; } /** * 关闭SqlSession与当前线程分开 */ public static void closeSqlSession(){ //从当前线程中获取SqlSession对象 SqlSession sqlSession = threadLocal.get(); //如果SqlSession对象非空 if(sqlSession != null){ //关闭SqlSession对象 sqlSession.close(); //分开当前线程与SqlSession对象的关系,目的是让GC尽早回收 threadLocal.remove(); } } }
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"> <display-name></display-name> <servlet> <servlet-name>SearchServlet</servlet-name> <servlet-class>cn.servlet.SearchServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>SearchServlet</servlet-name> <url-pattern>/SearchServlet</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>
index.jsp
所需JAR放在图片文件<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <script type="text/javascript" src="static/jquery-1.8.3.min.js"></script> <style type="text/css"> #mydiv{ positon:absolute; left:50%; top:50%; margin-left:450px; margin-top:200px; } .mouseOver{ background:#708090; color:#FFFAFA } .mouseOut{ background:#FFFAFA; color:#000000; } </style> <script type="text/javascript"> var xmlHttp; //获得用户输入内容的关联信息的函数 function getMore(){ //1.获得用户输入的内容 var content = $("#keyword").val(); if (content == null) { clearContent(); return; } //2. 给服务器发送用户输入的内容,采用ajax异步提交,使用xmlHttp对象 xmlHttp = createXMLHttp(); //alert(xmlHttp); //3.要给服务器发送数据 var url = "SearchServlet?keyword="+escape(content); //参数true表示JavaScript脚本会在send()方法之后继续执行,而不会等待来自服务器的响应。 xmlHttp.open("GET",url,true); //xmlHttp绑定回调方法,这个回调方法会在xmlHttp状态发生改变后被调用; //xmlHttp有四种状态0-4,状态0:未初始化(生成xmlHttp对象等一系列初始动作);状态1:正在加载(请求服务器资源) //状态2:已加载(资源存在请求成功);状态3:交互(与服务器交互中,接收资源);状态4:完成(完成) //我们只关心4这种状态,因为只有数据传输完成后调用这个回调方法才有意义 xmlHttp.onreadystatechange = callback; xmlHttp.send(null); } //获得xmlHttp对象 function createXMLHttp(){ //对于大多数的浏览器都适用 var xmlHttp; if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } //考虑浏览器的兼容性 if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); if (!xmlHttp) { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } } return xmlHttp; } //回调函数 function callback(){ //状态4代表已完成 if (xmlHttp.readyState == 4) { //200代表服务器响应成功 if (xmlHttp.status == 200) { //交互成功,获得响应的文本格式的数据; var result = xmlHttp.responseText; //解析获得数据,加上小括号是为了能让js识别出这是json字符串 var json = eval("("+result+")"); //获得数据之后就可以动态的在输入框下面展示数据了 //alert(json); setContent(json); } } } //设置关联数据的展示 ,参数代表的是服务器传输过来的数据 function setContent(contents){ //在设置内容之前先清空之前的数据 clearContent(); //设置关联信息的显示的位置 setLocation(); //首先获得关联数据的长度,以此确定生成多少个<tr></tr> var size = contents.length; for ( var i = 0; i < size; i++) { var nextNode = contents[i]; var tr = document.createElement("tr"); var td = document.createElement("td"); td.setAttribute("border","0"); td.setAttribute("bgcolor","#FFFAFA"); td.onmouseover = function(){ this.className = 'mouseOver'; }; td.onmouseout = function(){ this.className = 'mouseOut'; }; td.onclick = function(){ //这个方法实现的是当鼠标去点击一个关联数据时,输入框的内容设置为所点击的关联数据 }; var text = document.createTextNode(nextNode); td.appendChild(text); tr.appendChild(td); document.getElementById("content_table_body").appendChild(tr); } } //清除内容 function clearContent(){ var contentTableBody = document.getElementById("content_table_body"); var size = contentTableBody.childNodes.length; for ( var i = size-1; i >= 0; i--) { contentTableBody.removeChild(contentTableBody.childNodes[i]); } document.getElementById("popDiv").style.border = "none"; } //设置位置的方法 function setLocation(){ //关联信息显示位置要和输入框的位置一致 var content = document.getElementById("keyword"); var width = content.offsetWidth;//输入框的宽度 //alert(width); var left = content["offsetLeft"]; var top = content["offsetLeft"] + content.offsetHeight; //获得显示数据的div var popDiv = document.getElementById("popDiv"); popDiv.style.border = "black 1px solid"; popDiv.left = left + "px"; popDiv.top = top + "px"; popDiv.width = width + "px"; document.getElementById("content_table").style.width = width + "px"; document.getElementById("content_table_body").style.width = width + "px"; //alert(document.getElementById("content_table").style.width); } </script> </head> <body> <div id="mydiv"> <input type="text" style="width:200px" id="keyword" οnkeyup="getMore()" οnblur="clearContent()" οnfοcus="getMore()"/> <input type="button" value="百度一下" style="background-color:#ccc"> <!-- 内容展示的区域 --> <div id="popDiv"> <table id="content_table" bgcolor="#FFFAFA" border="0" cellspacing="0" cellpadding="0"> <tbody id="content_table_body"> <!-- 这里用来展示动态查询出来的数据 --> </tbody> </table> </div> </div> </body> </html>
Servlet+Ajax实现简单的搜索框智能提示
最新推荐文章于 2020-07-24 11:34:58 发布
本文介绍如何结合Servlet和Ajax技术,实现在搜索框中输入时的智能提示功能,通过Mybatis配置信息和Dao层操作,提升用户体验。
摘要由CSDN通过智能技术生成