Demo-Servlet+Ajax实现搜索框智能提示

最新推荐文章于 2025-07-25 21:28:21 发布

不服输的粥粥

最新推荐文章于 2025-07-25 21:28:21 发布

阅读量582

点赞数 9

CC 4.0 BY-SA版权

分类专栏： javaDemo 文章标签： servlet ajax 前端

本文链接：https://blog.youkuaiyun.com/qq_42678635/article/details/139214213

javaDemo 专栏收录该内容

2 篇文章

订阅专栏

视频学习网址-慕课网

1.分析

在搜索框输入关键字
浏览器将关键字异步发送给服务器
服务器经过处理后，将相应的数据以json格式返回给客户端
客户端接收到服务器的相应数据，解析之后使用js操作dom显示数据

2.图解

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/1e488ab7642c441daa20cdc93ff65140.png

重点1：数据交互采用ajax方式
重点2：js解析数据动态展示

3.动手实践(工具：idea)

实现前台页面功能
实现后台处理程序

3.1创建javaEE项目

在这里插入图片描述

3.2 pom依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.example</groupId>
    <artifactId>AjaxTest-ZhiNengSousou</artifactId>
    <version>1.0-SNAPSHOT</version>
    <name>AjaxTest-ZhiNengSousou</name>
    <packaging>war</packaging>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.target>1.8</maven.compiler.target>
        <maven.compiler.source>1.8</maven.compiler.source>
        <junit.version>5.9.1</junit.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.1</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>org.junit.jupiter</groupId>
            <artifactId>junit-jupiter-api</artifactId>
            <version>${junit.version}</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.junit.jupiter</groupId>
            <artifactId>junit-jupiter-engine</artifactId>
            <version>${junit.version}</version>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.8.5</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>3.3.2</version>
            </plugin>
        </plugins>
    </build>
</project>

3.2 编写search.jsp

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>Search-AjaxTest</title>
    <style type="text/css">
        #mydiv{
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -50px;
        }

        .mouseOver {
            background: #708090;
            color: #FFFAFA;
        }

        .mouseOut {
            background: #FFFAFA;
            color: #000000;
        }
        </style>

</head>
<body>
<%--    解决问题：--%>
<%--    1.输入框有输入时，鼠标移开输入框时(焦点消失)，显示列表消失；鼠标重新放上，有列表显示--%>
<%--    2.清空输入框，显示列表消失--%>
<%--    3.列表显示之前，清空之前的显示--%>
<%--    4.鼠标放上列表某一项时候，有颜色变化，离开时，颜色变化消失--%>

    <br/>
        <div id="mydiv">
            <input type="text" size="50" id="keyword" onkeyup="getMoreContent()"
            onblur="keywordBlur()" onfocus="getMoreContent()">
            <input type="button" width="50px" value="百度一下">

            <%--下面是内容展示区域--%>
            <div id="popDiv">
                <table id="content_table" bgcolor="#FFFAFA" border="0" cellpadding="0" cellspacing="0">
                    <tbody id="content_table_body">

                    <%--动态查询出来的数据显示在这里--%>
                    <%-- <tr><td>hello</td></tr>--%>
                    <%-- <tr><td>ajax</td></tr>--%>


                    </tbody>
                </table>
            </div>
        </div>
</body>
<script type="text/javascript">
    var xhr;
    //获得用户输入关联信息的函数
    function getMoreContent(){
        //获得用户输入
        var content=document.getElementById("keyword");

        if (content.value==""){
            clearContent();
            return;
        }
        //alert 打印输入框的内容，输入会有弹窗
        //alert(content.value);

        //给服务器传递输入的内容 ajax异步发送
        //1.创建XmlHttp对象
        xhr=creatXmlHttpRequest();
        //2.给服务器发送数据
        //escape() 函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。
        var url="search?keyword="+escape(content.value);
        xhr.open("GET",url,true);// true表示js调用send方法后继续执行，不会等待来自服务器的相应
        //3.绑定回调函数，回调方法会在xmlHttp状态改变的时候被调用
        //xmlHttp状态（0-4），我们只关心4（完成）状态

        xhr.onreadystatechange=callback;
        xhr.send(null);
    }

    //获得XmlHttp对象
    function creatXmlHttpRequest(){
        if (window.XMLHttpRequest){
            xhr=new XMLHttpRequest();
        }else {//考虑浏览器的兼容性
            if(window.ActiveXObject){
                xhr=new ActiveXObject("Microsoft.XMLHTTP");
            }
            if(!xhr){
                xhr=new ActiveXObject("Msxml2.XMLHTTP");
            }
        }
        return xhr;
    }
    //回调函数
    //当 readyState 变为 4 时，表示请求已完成，而 status 为 200 表示成功接收到服务器响应。这时，我们可以执行相应的逻辑
    function callback(){

        //4代表完成
        if(xhr.readyState==4){
            //200代表服务器相应成功
            if(xhr.status==200){
                //交互成功，获得响应的数据是文本格式
                var result=xhr.responseText;
                //解析数据   eval方法是将json字符串转换成json对象
                /**
                 * eval(s)
                 * 如果参数s是字符串，并且字符串中的表达式是JSON格式（此时的JOSN格式外面要加上一对小括号将JSON包围起来），则eval()方法返回该JSON。
                 */
                var json=eval("("+result+")");
                //把数据展示到输入框下面
                //alert(json);  打印从后端接收过来的json测试
                //获得数据之后，动态展示数据到输入框
                setContent(json);

            }
        }
    }

    //设置关联数据展示
    function setContent(contents){

        clearContent();
        setLocation();


        //获得关联数据的长度，确定有多少个<tr></tr>
        var size=contents.length;
        //设置内容
        for (let i = 0; i < size; i++) {
            var nextNode=contents[i];//代表json格式数据的第i个元素
            var tr=document.createElement("tr");
            var td=document.createElement("td");
            td.setAttribute("border","0");
            td.setAttribute("bgcolor","#FFFAFA");
            td.onmouseover=function () {
                this.className="mouseOver";
            };
            td.onmouseout=function () {
                this.className="mouseOut";
            };
            td.onclick=function () {
                //当鼠标点击关联数据时，关联数据自动设置为输入框的内容
            };
            var text=document.createTextNode(nextNode);
            td.appendChild(text);
            tr.appendChild(td);
            document.getElementById("content_table_body").appendChild(tr);
        }
    }

    //清空之前的数据
    function clearContent(){
        var contentTableBody=document.getElementById("content_table_body");
        var size=contentTableBody.childNodes.length;
        for (let i = size-1; i >=0; i--) {
            contentTableBody.removeChild(contentTableBody.childNodes[i]);
        }
    }

    //当输入框失去焦点的时候，关联信息清空
    function keywordBlur(){
        clearContent();
    }

    //设置显示关联信息
    function setLocation(){
        //关联信息的显示位置
        var content=document.getElementById("keyword");
        var width = content.offsetWidth;//输入框的宽度
        var left = content["offsetLeft"];//距离左边框的距离
        var top = content["offsetTop"] + content.offsetHeight;//距离顶部
        //获取显示数据div
        var popdiv = document.getElementById("popdiv");
        //popdiv.style.border = "black 1px solid";
        //popdiv.style.left = left + "px";
        //popdiv.style.top = top + "px";
        //popdiv.style.width = width + "px";
        document.getElementById("content_table").style.width = width + "px";

    }
</script>
</html>

3.3 编写conrtoller

package com.example.ajaxtestzhinengsousou;

import com.google.gson.Gson;

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 java.io.IOException;
import java.util.ArrayList;
import java.util.List;

@WebServlet("/search")
public class SearchServet extends HttpServlet {


    static List<String> datas = new ArrayList<String>();
    //模拟数据
    static {

        datas.add("ajax");
        datas.add("ajax post");
        datas.add("becky");
        datas.add("bill");
        datas.add("james");
        datas.add("jerry");
        datas.add("hao");

    }


    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        //获取客户端数据
        String keyword = request.getParameter("keyword");
        //获取关键字
        List<String> listData = getData(keyword);

        //返回json格式
        Gson gson = new Gson();
        //System.out.println(gson.toJson(listData));  //测试根据前端输入  后端获得的json
        response.getWriter().write(gson.toJson(listData).toString());

    }

    public List<String> getData(String keyword){
        List<String> list = new ArrayList<String>();
        for (String data:datas) {
            if(data.contains(keyword)){
                list.add(data);
            }
        }
        return  list;
    }

}