Ajax实现关键字联想和自动补全功能及遇到坑 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; }

后端代码

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 {@Overrideprotected 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); }}

【Ajax实现关键字联想和自动补全功能及遇到坑】
用到的实体类

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