Ajax的一个小实例

需求：实现一个百度搜索的提示框，随着我键盘的输入，下面的候选输入框也在不断的发生变化

提前将一些有关搜索的数据存储到数据库表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>

最终效果： 随着我键盘的输入，下面的候选输入框也在不断的发生变化！！！这就是最终的效果

凌研研

发布了11 篇原创文章 · 获赞 4 · 访问量 173

私信关注

猜你喜欢