Ajax实现搜索文本框自动联想功能(1)

由于没有使用数据库，联想数据是通过List集合模拟的。

原理：

• 前端通过Ajax将文本框数据发送给后端

• 后端用List集合模拟数据库进行数据遍历

• 遍历的数据结果要加上分隔符(例如本人使用的是逗号“ , ”)

• 后端将遍历出来的数据拼接在一起发送给前端Ajax

• 前端Ajax接收到数据对数据进行遍历

• 利用split() 方法用于把一个字符串分割成字符串数组

• 然后再对其数组遍历，将遍历结果和html进行拼接

效果

代码

注意前端用到了JQuery框架

前端代码：

后台servlet代码：

package servle

t;

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.io.PrintWriter;

import java.util.ArrayList;

import java.util.List;

@WebServlet(“/Searchservlet”)

public class Searchservlet extends HttpServlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

//设置响应内容类型和编码格式

request.setCharacterEncoding(“utf-8”);

response.setContentType(“text/html;charset=utf-8”);

写在最后

为了这次面试，也收集了很多的面试题！

以下是部分面试题截图

//设置响应内容类型和编码格式

request.setCharacterEncoding(“utf-8”);

response.setContentType(“text/html;charset=utf-8”);

写在最后

为了这次面试，也收集了很多的面试题！

以下是部分面试题截图

[外链图片转存中…(img-whLam5pP-17101738122)]