用ajax实现关键字联想和自动补全

遇到的小坑

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

代码实现

前端代码

后端代码

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数据库，查询速度比较慢，但演示关键字联想和自动补全功能的测试目的已经达到