javaweb：利用ajax&jQuery&JSTL实现搜索框实时提示->.html写下另一个jsp

实现的效果：

 1.数据库的搭建（mySql）

//获取数据库连接  

package cn.sousuo.util;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

public class DbUtil {
	private static final String DriveName="com.mysql.jdbc.Driver";
	private static final String url="jdbc:mysql://localhost:3306/javaweb?useUnicode=true&characterEncoding=utf8&useSSL=false";
	private static final String user="root";
	private static final String password="22222";
	
	public static Connection getConn() {
		Connection conn=null;
		try {
			Class.forName(DriveName);
			conn = DriverManager.getConnection(url,user,password);
		} catch (ClassNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return conn;
	}
}

2.dao层

//返回一个装有关键字的集合;  

public List<Word> findWords(String words){

// 1.获取数据库连接

        List<Word> list = new ArrayList<>();
        Connection conn = DbUtil.getConn();

//2.对数据库内数据查询；保存到list中  --模糊查询--

        String sql = "SELECT * FROM tb_words WHERE words like ? limit ? ";

            PreparedStatement pstmt = conn.prepareStatement(sql);
            pstmt.setString(1, words+"%");  //以关键词开头
            pstmt.setInt(2, 5);  //我只要5个
            ResultSet rs = pstmt.executeQuery();
            while(rs.next()){
                list.add(new Word(rs.getInt(1),rs.getString(2)));
            }

//3.返回list集合

           return list;

}

3.model层

新建Word.java;建立List<E>中的E ：  Word类

4.service层

写doget dopost 方法

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws Exception {
        // TODO Auto-generated method stub
        //1.获取 你要查找的数据
        String words = request.getParameter("words");
        
        // 2. dao层执行查询任务
        WordsDao wordsDao = new WordsDaoImp();
        List<Word> list = wordsDao.findWords(words);
        
        // 3.返回数据：传到页面的方式写到一个新的 jsp页面上
        request.setAttribute("list", list);
        request.getRequestDispatcher("findwords.jsp").forward(request, response);
    }

5.jsp页面

第一个：index.jsp界面是搜索框界面也就是实现的图一：
<center>
    搜索框：<input id="word" name="words" type="text" style="width:400px; height:40px; border:1px solid black;font-size: 20px">
    <input type="button" style="height:45px;width:50px" value="搜索">
    
    <div id="words" style="position:relative;left:3px;width:400px; height:200px;border:1px solid blue;display:none">
    </div>
</center>

第二个：findwords.jsp：敲下键盘后得到的搜索框内容需要导入jstl架包 ，4中所写下的请求转发的界面

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<table style="width:400px">
<c:forEach items="${list }" var="ws">

<tr>
<td>${ws.words }</td>
</tr>

</c:forEach>
</table>

里面的html、body、head都可以省略；因为它毕竟只是个分栏

6.ajax的js代码

在index.jsp的head里要加入jquery包
 //因为导入的是findWords.jsp里的内容
 $("words").html(data);  不然你可以 //console.log(data)自己试试

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#word").keyup(function(){
            var words = $("#word").val();
            if(words!=""){
                $.ajax({
                    method:"POST",
                    url:"WordsServlet",
                    data:{
                    "words":words
                    },
                    success:function(data){
                    $("words").show();
                    $("words").html(data);
                    }
                });    
            }else{ 
                    $("words").hide();
            }
        })
    })
</script>

有输入时显示提示框show（）  没有时隐藏hide（）

 番外：

同样还写了一种用XStream将list转换为xml格式

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		String keyword = request.getParameter("keyword");
		
		WordsDao wordsDao = new WordsDaoImp();
		List<Word> list = wordsDao.sch(keyword);
		
		/*  方法一： 跳转页面 
		*	request.setAttribute("list", list);
		*	request.getRequestDispatcher("showwords.jsp").forward(request, response);
		*/
		
		/* 方法二：  将list 转换为xml格式返回*/
		XStream xStream = new XStream();
		xStream.alias("word", Word.class);
		xStream.useAttributeFor(Word.class, "id");
		String xml = xStream.toXML(list);
		response.getWriter().write(xml);
	}

在jsp页面的ajax中则写：

success:function(data){
		//	console.log(data);
		/*得到的data格式
		<list>
			<word id="1">
			    <words>aaa</words>
			</word>
		</list>
		*/
			$(data).find("word").each(function(){
			var word = $(this).find("words").text();
			$("#words").show();
			$("#words").append("<tr><td>"+word+"</td></tr>");
		})
	}

 之后的显示为：

其值在不断的添加；无法清空

总结：

---

如果要实时更新，采用新写一个jsp界面在jQuery里html出来；