ajax 类似于百度搜索,ajax+JQuery实现类似百度智能搜索框

最近再学习ajax,上课老师让我们实现一个类似百度首页实现搜索框的功能,刚开始做的时候没有一点头绪,查阅大量网上的资源后,发现之前的与我们现在的有些区别,所以在此写出来,希望能对大家有所帮助.

下面先展示下效果图:(ps:图片中的文字是参考的,不具有任何的攻击意义)

项目的目录结构:

一:首先是login.jsp页面 需要注意的是我是通过js的类库(jquery)封装的ajax,需要在webcontent下面导入jquery jar包,代码如下:

pageencoding="utf-8"%>

insert title here

#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

}

$(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(

"

" + data.message + "

");

$("#box").css("display", "block");

});

}

}, "json");

} else {

$("#box").css("display", "none");

}

});

})

type="button" id="button" value="百度一下">

二 为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 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,实现查询语句即可,在数据库操作语言里面,实现模糊查询,代码如图:

这是第一次写博客,写的不好,希望大家包容,我也是希望通过这种方式,来学习,进步,欢迎大家,留言讨论