ajax如何调用搜索功能输入文本的结果对应的idJavaWeb代码

以下是一个简单的 JavaWeb 示例代码，演示如何使用 Ajax 调用搜索功能并获取搜索结果对应的 ID：

Java Servlet 代码：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // 获取搜索关键词
    String keyword = request.getParameter("keyword");

    // 查询数据库并返回结果
    List<Map<String, Object>> results = search(keyword);

    // 将查询结果转换为 JSON 格式并返回给前端
    response.setContentType("application/json;charset=utf-8");
    response.getWriter().write(JSON.toJSONString(results));
}

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

// 查询数据库
private List<Map<String, Object>> search(String keyword) {
    // ...
}

JSP 页面代码：

<input type="text" id="search-input">
<ul id="search-results"></ul>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
    // 监听搜索框的输入事件
    $('#search-input').on('input', function() {
        // 获取搜索关键词
        var keyword = $(this).val();

        // 发送 Ajax 请求
        $.get('/search', {keyword: keyword}, function(results) {
            // 动态生成搜索结果列表
            var $ul = $('#search-results');
            $ul.empty();
            for (var i = 0; i < results.length; i++) {
                var $li = $('<li>').text(results[i].title).attr('data-id', results[i].id);
                $ul.append($li);
            }
        });
    });

    // 监听搜索结果列表的点击事件
    $('#search-results').on('click', 'li', function() {
        // 获取点击的列表项对应的 ID
        var id = $(this).attr('data-id');

        // 发送 Ajax 请求获取该项的详细信息
        $.get('/detail', {id: id}, function(detail) {
            // 展示详细信息
            // ...
        });
    });
});
</script>

在这个示例中，我们使用了 jQuery 库简化了 Ajax 请求的操作。通过监听搜索框的输入事件，在每次输入完成后向后端发送 Ajax 请求，并将查询结果动态生成为一个列表展示在页面上。对于每个查询结果，我们将其对应的 ID 保存在列表项的自定义属性中。当用户点击某个列表项时，我们获取该项对应的 ID，并将其作为参数发送给后端，获取该项的详细信息。