Ajax实现关键字联想和自动补全功能及遇到坑

遇到的小坑
代码实现

前端代码
后端代码
用到的实体类
自己封装的jdbc工具类
数据库表:
效果展示:

遇到的小坑

回调函数相对window.onload的摆放位置
给回调函数addData传数据时，如何操作才能将数据传进去

代码实现

前端代码

        ajax实现关键字联想和自动补全            *{            margin: 0;            padding: 0;            box-sizing: border-box;        }        #keyWords{            margin-top: 10px;            margin-left: 10px;            width: 300px;            height: 25px;            font-size: 20px;            padding-left: 5px;        }        #dataDiv{            background-color: wheat;            width: 300px;            margin-left: 10px;            display: none;        }        #dataDiv p{            padding-left: 10px;            padding-top: 7px;            padding-bottom: 3px;            cursor: pointer;        }        #dataDiv p:hover{            background-color: cornflowerblue;            color: white;        }                    window.onload = function (){            //获取dom对象            input_txt = document.getElementById("keyWords")            div_data = document.getElementById("dataDiv")            //为输入框绑定keyup事件            input_txt.onkeyup = function (){                //输入框为空，隐藏提示层                if(this.value.trim() == ""){                    div_data.style.display = "none"                }else{                    //每当keyup时，发送ajax请求，传递文本框内数据                    var xmlHttpRequest = new XMLHttpRequest();                    xmlHttpRequest.onreadystatechange = function (){                        if(this.readyState == 4){                            if(this.status == 200){                                //解析后端传来的json数据:[{"content" : "data"}, {}, {}]                                var jsonArray = JSON.parse(this.responseText)                                var html = ""                                for(var i = 0; i < jsonArray.length; i++){                                    var perData = jsonArray[i].content                                    //为p标签绑定单击事件,将数据以字符串的形式传给回调函数                                    html += ""+perData+"
"                                }                                div_data.innerHTML = html                                div_data.style.display = "block"                            }else{                                alert("异常状态码: " + this.status)                            }                        }                    }                    xmlHttpRequest.open("GET", "/ajax/ajaxAutoComplete?keyWords="+this.value+"", true)                    xmlHttpRequest.send()                }            }        }        function addData(perData){            //完成自动补全            input_txt.value= perData            //隐藏提示层            div_data.style.display = "none"        }                    <!--        java
        jsp
        service
        servlet
        docker
        linux
        -->

后端代码

package com.examples.ajax.servlet;import com.alibaba.fastjson.JSON;import com.examples.ajax.beans.KeyWords;import com.examples.ajax.utils.DBUtils;import jakarta.servlet.ServletException;import jakarta.servlet.annotation.WebServlet;import jakarta.servlet.http.HttpServlet;import jakarta.servlet.http.HttpServletRequest;import jakarta.servlet.http.HttpServletResponse;import java.io.IOException;import java.sql.Connection;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.sql.SQLException;import java.util.ArrayList;import java.util.List;@WebServlet("/ajaxAutoComplete")public class AjaxRequest13 extends HttpServlet {    @Override    protected void doGet(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        //获取前端传来的关键字        String keyWords = request.getParameter("keyWords");        //连接数据库，进行模糊查询        Connection conn = null;        PreparedStatement ps = null;        ResultSet rs = null;        //封装关键字对象        List keyWordsList = new ArrayList();        try {            conn = DBUtils.getConnection();            String sql = "select content from tb_search where content like ?";            ps = conn.prepareStatement(sql);            ps.setString(1, keyWords + "%");            rs = ps.executeQuery();            while(rs.next()){                String content = rs.getString("content");                //封装成关键字对象                KeyWords keyWordsObj = new KeyWords(content);                //将关键字对象封装                keyWordsList.add(keyWordsObj);            }        } catch (SQLException e) {            throw new RuntimeException(e);        }finally {            DBUtils.close(conn, ps, rs);        }        //后端数据json化        String jsonKeyWordsArray = JSON.toJSONString(keyWordsList);        //返回后端数据        response.getWriter().write(jsonKeyWordsArray);    }}

用到的实体类

package com.examples.ajax.beans;public class KeyWords {    private String content;    public KeyWords() {    }    public KeyWords(String content) {        this.content = content;    }    public String getContent() {        return content;    }    public void setContent(String content) {        this.content = content;    }}

自己封装的jdbc工具类

package com.examples.ajax.utils;import java.sql.*;import java.util.ResourceBundle;/** * 封装自己的jdbc工具类 */public class DBUtils {    static ResourceBundle bundle = ResourceBundle.getBundle("jdbc");    static String driver;    static String url;    static  String username;    static  String password;    static {        driver = bundle.getString("driver");        url = bundle.getString("url");        username = bundle.getString("username");        password = bundle.getString("password");        try {            Class.forName(driver);        } catch (ClassNotFoundException e) {            throw new RuntimeException(e);        }    }    private DBUtils(){}    public static Connection getConnection() throws SQLException {        return DriverManager.getConnection(url, username, password);    }    public static void close(Connection conn, PreparedStatement ps, ResultSet rs){        if(rs != null){            try {                rs.close();            } catch (SQLException e) {                throw new RuntimeException(e);            }        }        if(ps != null){            try {                ps.close();            } catch (SQLException e) {                throw new RuntimeException(e);            }        }        if(conn != null){            try {                conn.close();            } catch (SQLException e) {                throw new RuntimeException(e);            }        }    }}

数据库表:

一张表: tb_search
数据表描述: 除了id, 就一个字段 content varchar(255) not null

效果展示:

自己在远程数据库上用docker运行了一个mysql数据库，查询速度比较慢，但演示关键字联想和自动补全功能的测试目的已经达到