jquery百度提示框
创建表单页面
<center>标签，可以将包含在此标签的标签数据都剧中显示
在style标签内有一个position:relative;left:-43px;，作用是将此标签的内容向左偏移43px像素
源码：
<%@ 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>百度一哈</title>
//引入jquery
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
//引入有自己逻辑编写的js
<script type="text/javascript" src="js/baidu.js"></script>
</head>
<body>
//剧中显示数据
<center>
<h2>百度一下</h2>
//文本输入框
<input type="text" id="word" style=" width: 600px;height: 50px" name="bdword">
//按钮，没有实际作用
<input type="button" value="百度一下" style="width: 80px ; height: 50px ;border: 1px">
//用来显示提示的相关数据
<div id="baiduDIV" style="position:relative;left:-43px; height: 300px;width: 600px;border: 1px solid blue;display: none"></div>
</center>
</body>
</html>完成js逻辑代码
//$function(){});这是标准的格式
$(function(){
//创建一个事件，当按键弹起的时候被触发
$("#word").keyup(function () {
//获取到id为word的值
var word=$("#word").val();
//判断word的值，是否为空
if(word==""){
//为空就隐藏其id为baiduDIV的标签
$("#baiduDIV").hide();
}else{
//word不为空就执行post请求，传word的值到后端，并执行function
$.post("/checkUsername/baiduservlet",{word:word},function(data,status){
//这个data只是后台数据传过来的值的名字，叫什么无所谓，只要是在一个位置就行，同理status表示状态码
//将data数据以html格式写进div然后进行解析
$("#baiduDIV").html(data);
//显示div方框
$("#baiduDIV").show();
});
});
});创建servlet，dao等后端类
创建servlet
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
String word=request.getParameter("word");
checkdao cd=new checkImpl();
List<word> words = cd.findword(word);
//页面跳转，其实是将跳转的页面的数据上传到前端
request.getRequestDispatcher("list.jsp").forward(request, response);
request.setAttribute("words", words);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}创建dao
public List<word> findword(String word) throws SQLException {
//没有释放的工具
QueryRunner queryRunner=new QueryRunner(new ComboPooledDataSource());
return queryRunner.query("select * from baidu where word like ?" , new BeanListHandler<word>(word.class),word+"%");
}对上传数据进行加工的表单
pageEncoding="UTF-8"%>
<%@page isELIgnored="false"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<table style="width: 100%">
<c:forEach items="${words }" var="wordBean">
<tr>
<td>${wordBean.word} aq</td>
</tr>
</c:forEach>
</table>注意事项
sql语句中 模糊查找的时候，传的值
‘%a%‘表示要查找包含此数据的值’a%‘表示要查找以a开头的数据，以此类推jquery的 ("#").val(),,,,,, (“#”).html(),,,,三个的区别：：：：第一个是表示对标签内有value的值进行操作：：：：：；第二个是，对任何可以显示数据的标签的数据进行操作：：：第三个是在第二给基础上升级为，操作的数据可以是进行html的解析