什么是Ajax

实例（搜索关键字，出来下拉框）

我使用表格换掉了下拉框

index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>绥彼岸</title>
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
🔍<input id="keyWord" name="keyWord" οnkeyup="search()">
<ul id="list">

</ul>
<script>
    function search(){
        //得到输入框的值
        let keyWord=$("#keyWord").val()
        //发送到负责检索商品名称的servlet
        $.get("search.do",{keyWord},(resp)=>{
            //清空原来的选项
            $("#list").empty()
            //resp现在是从字符串变成了数组
            for(let n of resp){//foreach
                $("#list").append("<li>"+n+"</li>")
            }
        },"json");
    }

    //json
    //对象的字符串格式,json有固定的格式
    //将对象变成json
    //将json还原为对象
</script>
</body>
</html>

SearchServlet

package com.servlet;

import com.fasterxml.jackson.databind.ObjectMapper;

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("/search.do")
public class SearchServlet extends HttpServlet {

    //数据库中存在的商品名字
    List<String> list = new ArrayList<String>();

    {
        list.add("嘿嘿脑插");
        list.add("嗨丝奶茶");
        list.add("勃勃奶茶");
        list.add("雷斯奶茶");
        list.add("拉丝奶茶");
        list.add("哈哈奶茶");
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //去数据库查询  select * from goods where name like '%key%'
        String keyWord = req.getParameter("keyWord");
        //新建一个集合
        List<String> ns=new ArrayList<>();
        for (String n : list) {
            if(n.contains(keyWord)){
                ns.add(n);
            }
        }
        //设置响应的编码
        resp.setCharacterEncoding("utf-8");
        //需要把结果告诉前台
        PrintWriter out = resp.getWriter();
        //需要将集合变成json
        //1.需要获取转换对象
        ObjectMapper mapper = new ObjectMapper();
        //2.调用方法
        String str = mapper.writeValueAsString(ns);
        out.println(str);
    }

}

效果如下（页面放大400%）：
在这里插入图片描述