需求:实现一个百度搜索的提示框,随着我键盘的输入,下面的候选输入框也在不断的发生变化
提前将一些有关搜索的数据存储到数据库表word表中:
如下所示:
数据库中存储的值为:
前端搭建页面代码: 分割线内Ajax的使用(index.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(){
$("#word").keyup(function(){
//获取输入框的值
var word = $("#word").val();
// alert(word);
if(word==""){
$("#div01").hide();
}else{
----------------------------------------------------------------------------------------------------------
$.post("WordServlet",{word:word},function(data,status){
// alert(data);
$("#div01").show();
$("#div01").html(data);
})
-----------------------------------------------------------------------------------------------------------
}
})
})
</script>
</head>
<body>
<h3 align="center">百度一下</h3>
<center>
<input type="text" name = "word" id = "word" style="width: 500px;height: 40px ;border: 1px solid blue;" >
<input type="button" value="百度一下" style="width: 120px;height: 45px ;font-size: 20px;" >
<div id="div01" style="position:relative;left:-62px; width: 502px;height: 100px ;border: 1px solid blue;display: none;"> </div>
</center>
</body>
</html>
WordBean这个bean类:
package com.lishan.util;
import java.io.Serializable;
public class WordBean implements Serializable{
private Integer id ;
private String words;
public Integer getId() {
return id;
}
public void setId(Integer 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接口层代码:
package com.lishan.dao;
import java.sql.SQLException;
import java.util.List;
import com.lishan.util.WordBean;
/**
* 这是搜索数据的
* @author Administrator
*/
public interface WordDao {
List<WordBean> findWord(String word)throws SQLException;
}
Dao层实现层的代码:
public class WordDaoImpl implements WordDao{
public List<WordBean> findWord(String word) throws SQLException {
ComboPooledDataSource dataSource = new ComboPooledDataSource();
QueryRunner queryRunner = new QueryRunner(dataSource);
String sql = "select * from eee where words like ? limit 8";
List<WordBean> list = queryRunner.query(sql, new BeanListHandler<WordBean>(WordBean.class),word+"%");
return list;
}
}
注意:这个需求很简单,没有写service层
servlet代码:
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
request.setCharacterEncoding("UTF-8");
String word = request.getParameter("word");
WordDao dao = new WordDaoImpl();
List<WordBean> list = dao.findWord(word);
HttpSession session = request.getSession();
session.setAttribute("list", list);
request.getRequestDispatcher("list.jsp").forward(request, response);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
注意:这里服务器响应浏览器的好像是一个页面,其实不是的!!!
这整个list.jsp实际上都属于响应给浏览器的数据data,即index.jsp中ajax回应的数据data,然后把整个list.jsp变成了一个data,然后装入了一个div中 即index.jsp中的id="div01"的那个div中!!!
list.jsp 代码:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<table style="width: 100%">
<c:forEach items="${list }" var="word">
<tr>
<td>${word.words }</td>
</tr>
</c:forEach>
</table>
最终效果: 随着我键盘的输入,下面的候选输入框也在不断的发生变化!!!这就是最终的效果