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

分类：js_jQuery答疑 - 常见问题 · 发布时间：2023-02-27 20:12 · 阅读：7377

这篇文章主要介绍了Ajax实现关键字联想和自动补全功能,实现代码包括前端部分和后端部分，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

遇到的小坑

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

代码实现

前端代码

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

后端代码

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); } } } }