最近再学习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包中 代码如下:

 package com.wdh.servlet;

 import java.io.IOException;

 import java.util.List;

 import javax.servlet.ServletException;

 import javax.servlet.annotation.WebServlet;

 import javax.servlet.http.HttpServlet;

 import javax.servlet.http.HttpServletRequest;

 import javax.servlet.http.HttpServletResponse;

 import com.alibaba.fastjson.JSON;

 import com.wdh.bean.School;

 import com.wdh.dao.SchoolDao;

 import com.wdh.dao.SchoolDaoImpl;

 /**

  * Servlet implementation class LoginServlet

  */

 @WebServlet("/loginServlet")

 public class LoginServlet extends HttpServlet {

     private static final long serialVersionUID = 1L;

     protected void doGet(HttpServletRequest request, HttpServletResponse response)

             throws ServletException, IOException {

         // 1获取请求参数

         String shuru = request.getParameter("shuru");

         // 2处理业务

         SchoolDao schoolDao = new SchoolDaoImpl();

         List<School> list = schoolDao.queryMore(shuru);

         System.out.println(list);

         // 将list集合转成 json字符串

         String json = JSON.toJSONString(list);

         // 3 响应

         response.getWriter().write(json);

     }

     protected void doPost(HttpServletRequest request, HttpServletResponse response)

             throws ServletException, IOException {

         // TODO Auto-generated method stub

         doGet(request, response);

     }

 }

三,连接数据库使用JDBC连接的数据库

3在BasicDao.java中是封装好的对数据库的增删改查,创建实现类接口,继承basicDao,实现查询语句即可,在数据库操作语言里面,实现模糊查询,代码如图:

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

ajax+JQuery实现类似百度智能搜索框的更多相关文章

  1. Jquery实现类似百度的搜索框

    最近工作中需要做一个搜索框,类似百度的搜索框,需要达到两个功能: 1.输入关键字,展示匹配的下拉列表 2.选择匹配的项后查出相关内容 一般电商网站中也经常用到该搜索条,首先分析功能实现,输入关键字马上 ...

  2. 淘宝购物车页面 智能搜索框Ajax异步加载数据

    如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...

  3. 分享一个jquery写的类似于百度的搜索框,(可动态配置,可单列或者table格式,可填充数据)

    需求:类似于百度的搜索框,可配置,可单列可table格式,可填充数据.页面可多次使用,简单,易用. 想法:使用jquery,css,ajax,前台调用,后台返回json数据. jquery代码: va ...

  4. js/jQuery实现类似百度搜索功能

    一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...

  5. jQuery+HTML5弹出创意搜索框层

    效果体验:http://hovertree.com/texiao/jquery/26/ 本效果适用于移动设备,可以使用手机等浏览效果. 代码下载:http://hovertree.com/h/bjaf ...

  6. 使用jQuery和CSS3生成的搜索框变形全屏搜索效果

    在线演示 本地下载 使用jQuery和CSS3过渡变形效果生成的一个搜索框变形效果实现,可以帮助你更好利用页面格式和内容.实验性质的代码,请大家在产品环境里自己修改使用!

  7. js 百度云搜索框

    // ==UserScript==// @name 百度云插件+APIKey// @namespace // @version 5.0.2.1// @description 在百度云网盘的页面添加一个 ...

  8. AJAX实现类似百度的搜索提示，自动补全和键盘、鼠标操作

    <script type="text/javascript"> $(document).ready(function(){ var highlightIndex = - ...

  9. 使用jqueryUI和corethink实现的类似百度的搜索提示

    代码:http://download.csdn.net/detail/u012995856/9676845 效果: 目录: 这里是以corethink模块的形式,只需要安装上访问 index.php? ...

随机推荐

  1. CDQZ集训DAY5 日记

    又一个爆炸的一天…… 早上起来发现貌似是周末,七中放假(别人家的学校(一周一放,一放两天)……)然而感觉状态不是很好,感觉药丸. 题目一上来就装弱,有诈.第一题上来先打暴力,T2不知道怎么打.T3暴力 ...

  2. springboot 整合mybatis，pagehelper。测试类。

    报名立减200元.暑假直降6888. 遇到的异常. 1.这是在使用mybatis成功连接数据库后,通过service层调用dao层出现的异常. 异常原因:在启动类上面的注解@MapperScan没有指 ...

  3. 关于CMTS设备的一些备忘

    博主工作内容包括cable modem,对CM的工作方式有一些了解,但是对CMTS头端怎么带动一个用户小区长久以来一直是一头雾水.今天找了些资料,对这块有了一些了解,并把自己的理解总结下来. 比如我家 ...

  4. CSS Grid网格布局全攻略

    CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...

  5. JS时间处理，获取天时分秒。以及浏览器出现的不兼容问题

    //获取时间的天,小时,分钟,秒 function ToTime(second) { second = second / ; var result ; ) % ; ) % ; * )); ) { re ...

  6. 【CYH-02】NOIp考砸后虐题赛:转换式：题解

    这道题真的不难吧. 如@AKEE@AKEE@AKEE 大佬所说,此题的确可以将n推广到一般情况. 但题面还是良心的只到了N<=4N<=4N<=4 以目前的题目来看,简单模拟即可. 分 ...

  7. 个人永久性免费-Excel催化剂功能第25波-小白适用的文本处理功能

    翻看各大插件,都不约而同地出现系列文本处理的功能,自己在使用Excel过程中,在临时性的需求时,也会用上这几种文本处理,但仅适用于小范围的使用,使用这些功能不是数据处理的正确的之道,数据处理的核心需求 ...

  8. [leetcode] 542. 01 Matrix (Medium)

    给予一个矩阵,矩阵有1有0,计算每一个1到0需要走几步,只能走上下左右. 解法一: 利用dp,从左上角遍历一遍,再从右下角遍历一遍,dp存储当前位置到0的最短距离. 十分粗心的搞错了col和row,改 ...

  9. docker实战（一）之Tomcat的安装

           docker号称分分钟就可以将环境构建完成,这话一点也不假,因为docker在使用软件时只需要从官方 仓库中拉取对应的镜像就行了.docker的使用前需要了解两个名词--镜像和容器.这两 ...

  10. laravel5.6 使用迁移创建表

    laravel 使用迁移创建表 创建迁移文件 --table 和 --create 选项可以用于指定表名以及该迁移是否要创建一个新的数据表.这些选项只需要简单放在上述迁移命令后面并指定表名: php ...