ajax+JQuery实现类似百度智能搜索框
程序员文章站
2022-05-18 21:08:33
最近再学习ajax,上课老师让我们实现一个类似百度首页实现搜索框的功能,刚开始做的时候没有一点头绪,查阅大量网上的资源后,发现之前的与我们现在的有些区别,所以在此写出来,希望能对大家有所帮助. 下面先展示下效果图:(ps:图片中的文字是参考的,不具有任何的攻击意义) 项目的目录结构: 一:首先是lo ......
最近再学习ajax,上课老师让我们实现一个类似百度首页实现搜索框的功能,刚开始做的时候没有一点头绪,查阅大量网上的资源后,发现之前的与我们现在的有些区别,所以在此写出来,希望能对大家有所帮助.
下面先展示下效果图:(ps:图片中的文字是参考的,不具有任何的攻击意义)
项目的目录结构:
一:首先是login.jsp页面 需要注意的是我是通过js的类库(jquery)封装的ajax,需要在webcontent下面导入jquery jar包,代码如下:
<%@ 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>
<style type="text/css">
#shuru {
width: 500px;
height: 35px;
border: 1px solid #c3c3c3;
}
#button {
width: 85px;
height: 37px;
border: 1px solid #c3c3c3;
}
#box {
width: 500px;
border: 1px solid #c3c3c3;
margin-left: -85px;
display: none;
text-align: left
}
</style>
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(function() {
//0键盘抬起事件 通过div中的id获取input输入框
$("#shuru").keyup(
function() {
$("#box").empty();
//1 获取输入框的值
var shuru = $(this).val().trim();
//alert(shuru);
//判断用户输入的是否为空,如果为空不发送ajax
if (shuru != null && shuru != "") {
//2 发送ajax
$.post("loginservlet", "shuru=" + shuru, function(
result) {
//alert(result);
if (result == null || result == "") {
$("#box").css("display", "none");
} else {
//遍历结果集
$.each(result, function(index, data) {
//alert(index+""+data.message)
//显示在隐藏div上面
$("#box").append(
"<div>" + data.message + "</div>");
$("#box").css("display", "block");
});
}
}, "json");
} else {
$("#box").css("display", "none");
}
});
})
</script>
</head>
<body>
<center>
<div>
<img alt="" src="img/bd_logo1.png" width="310" height="110">
<div>
<input type="text" id="shuru" name="shuru"><input
type="button" id="button" value="百度一下">
<div id="box"></div>
</div>
</div>
</center>
</body>
</html>
二 为loginservlrt.servlet 在 servlet包中 代码如下:
1 package com.wdh.servlet;
2
3 import java.io.ioexception;
4 import java.util.list;
5
6 import javax.servlet.servletexception;
7 import javax.servlet.annotation.webservlet;
8 import javax.servlet.http.httpservlet;
9 import javax.servlet.http.httpservletrequest;
10 import javax.servlet.http.httpservletresponse;
11
12 import com.alibaba.fastjson.json;
13 import com.wdh.bean.school;
14 import com.wdh.dao.schooldao;
15 import com.wdh.dao.schooldaoimpl;
16
17 /**
18 * servlet implementation class loginservlet
19 */
20 @webservlet("/loginservlet")
21 public class loginservlet extends httpservlet {
22 private static final long serialversionuid = 1l;
23
24 protected void doget(httpservletrequest request, httpservletresponse response)
25 throws servletexception, ioexception {
26 // 1获取请求参数
27 string shuru = request.getparameter("shuru");
28 // 2处理业务
29 schooldao schooldao = new schooldaoimpl();
30 list<school> list = schooldao.querymore(shuru);
31 system.out.println(list);
32 // 将list集合转成 json字符串
33 string json = json.tojsonstring(list);
34 // 3 响应
35 response.getwriter().write(json);
36
37 }
38
39 protected void dopost(httpservletrequest request, httpservletresponse response)
40 throws servletexception, ioexception {
41 // todo auto-generated method stub
42 doget(request, response);
43 }
44
45 }
三,连接数据库使用jdbc连接的数据库
3在basicdao.java中是封装好的对数据库的增删改查,创建实现类接口,继承basicdao,实现查询语句即可,在数据库操作语言里面,实现模糊查询,代码如图:
这是第一次写博客,写的不好,希望大家包容,我也是希望通过这种方式,来学习,进步,欢迎大家,留言讨论