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

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

项目的目录结构:

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

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2. pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>Insert title here</title>
  8. <style type="text/css">
  9. #shuru {
  10. width: 500px;
  11. height: 35px;
  12. border: 1px solid #c3c3c3;
  13. }
  14.  
  15. #button {
  16. width: 85px;
  17. height: 37px;
  18. border: 1px solid #c3c3c3;
  19. }
  20.  
  21. #box {
  22. width: 500px;
  23. border: 1px solid #c3c3c3;
  24. margin-left: -85px;
  25. display: none;
  26. text-align: left
  27. }
  28. </style>
  29. <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
  30. <script type="text/javascript">
  31. $(function() {
  32. //0键盘抬起事件 通过div中的ID获取input输入框
  33. $("#shuru").keyup(
  34. function() {
  35.  
  36. $("#box").empty();
  37. //1 获取输入框的值
  38. var shuru = $(this).val().trim();
  39. //alert(shuru);
  40.  
  41. //判断用户输入的是否为空,如果为空不发送ajax
  42. if (shuru != null && shuru != "") {
  43. //2 发送ajax
  44. $.post("loginServlet", "shuru=" + shuru, function(
  45. result) {
  46. //alert(result);
  47. if (result == null || result == "") {
  48. $("#box").css("display", "none");
  49. } else {
  50. //遍历结果集
  51. $.each(result, function(index, data) {
  52.  
  53. //alert(index+""+data.message)
  54. //显示在隐藏div上面
  55. $("#box").append(
  56. "<div>" + data.message + "</div>");
  57. $("#box").css("display", "block");
  58.  
  59. });
  60.  
  61. }
  62.  
  63. }, "json");
  64. } else {
  65.  
  66. $("#box").css("display", "none");
  67. }
  68.  
  69. });
  70. })
  71. </script>
  72.  
  73. </head>
  74. <body>
  75. <center>
  76. <div>
  77. <img alt="" src="img/bd_logo1.png" width="310" height="110">
  78. <div>
  79. <input type="text" id="shuru" name="shuru"><input
  80. type="button" id="button" value="百度一下">
  81. <div id="box"></div>
  82. </div>
  83.  
  84. </div>
  85.  
  86. </center>
  87. </body>
  88. </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,实现查询语句即可,在数据库操作语言里面,实现模糊查询,代码如图:

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

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. [NOIP2003] 传染病控制题解

    问题 F: [NOIP2003] 传染病控制 时间限制: 1 Sec  内存限制: 128 MB 题目描述 [问题背景] 近来,一种新的传染病肆虐全球.蓬莱国也发现了零星感染者,为防止该病在蓬莱国大范 ...

  2. Java中什么是type,它和class有什么关系?

    看代码总能遇到关键字--type,对于type的概念不明白.翻译水平也有限,所以贴几个地址.自己先看着. https://stackoverflow.com/questions/16600750/di ...

  3. Jmeter自定义Java请求开发

    一.本次实验目的 IDEA新建maven项目,使用java开发自定义jmeter的请求. 本次开发使用的代码,会百度云分享给大家. 二.本次实验环境 Idea 2017.02 Jmeter 5.1.1 ...

  4. Unity3D 学习笔记一

    安装Unity3D 环境 1 进入Unity3D 官网 http://unity3d.com/cn/ 找到获取 Unity 进去之后点击下载 2.下载完成之后进行安装,由于新的版本采用在线安装方式所以 ...

  5. 「PowerBI」分析服务多维数据结构重回关系数据库的一大绝招

    在过往Excel催化剂定位的轻量级Excel+PowerBIDesktop的解决方案中,已经做过了近乎完美的PowerBIDesktop数据模型数据导出到Excel工作表的应用,这也是个人版数据应用的 ...

  6. F#周报2019年第29期

    新闻 ML.NET 1.2发布,包含Model Builder升级 NuGet.org上现在显示GitHub的使用情况 微基准测试设计准则 为线程添加mono.wasm支持 Haskell--经验总结 ...

  7. [leetcode] 103 Binary Tree Zigzag Level Order Traversal (Medium)

    原题链接 题目要求以"Z"字型遍历二叉树,并存储在二维数组里. 利用BFS,对每一层进行遍历.对于每一层是从左还是从右,用一个整数型判断当前是偶数行还是奇数行就可以了. class ...

  8. 【干货干货】configtxlator 工具介绍

    这一章我们对configtxlator做一个解说. 1, configtxlator 他是什么,有什么用? configtxlator 官方说明是用于生成Hyperledger结构通道配置的实用程序: ...

  9. SQLyog 破解版

    百度云:链接:http://pan.baidu.com/s/1eSMEzIE    密码:ubi2

  10. C# 怎样将DateTime类型进行日期的加减

    C#中 DateTime类型有封装好的函数 例如: //将当前时间转换为指定格式的DateTime类型 DateTime dt=DateTime.Parse(DateTime.Now.ToString ...