如何在JSP中使用ajax在同一页面显示另一个页面的搜索结果

在JSP中使用Ajax可以实现无刷新请求数据，从而大幅提高网站的用户体验，对于需要快速显示搜索结果的网站，使用Ajax是很有必要的。下面是使用Ajax在同一页面显示另一个页面的搜索结果的攻略：

首先要编写JSP页面，其中包含搜索框和用于显示搜索结果的HTML元素。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ajax搜索示例</title>
    <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <h1>Ajax搜索示例</h1>
    <form>
        <label for="search">搜索：</label>
        <input type="text" id="search" name="search">
        <button type="button" id="searchBtn">搜索</button>
    </form>
    <div id="result"></div>
    <script>
        // 定义Ajax请求函数
        function search() {
            // 获取搜索关键字
            var keyword = $('#search').val();
            // 发送Ajax请求
            $.get('/search.jsp', { keyword: keyword }, function(data) {
                // 将搜索结果显示在页面上
                $('#result').html(data);
            });
        }
        // 绑定搜索按钮点击事件
        $('#searchBtn').click(search);
    </script>
</body>
</html>

该页面包含搜索框和用于显示搜索结果的div元素。当用户在搜索框中输入关键字并点击搜索按钮时，页面将发送Ajax请求，向/search.jsp页面请求搜索结果，并将结果显示在div元素中。

接下来要编写/search.jsp页面，用于接收Ajax请求，并返回搜索结果。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<%@ page import="java.io.*" %>
<%
    // 获取搜索关键字
    String keyword = request.getParameter("keyword");
    // 模拟搜索结果
    List<String> results = new ArrayList<String>();
    for (int i = 1; i <= 10; i++) {
        results.add("搜索结果" + i);
    }
%>
<ul>
<% 
    // 输出搜索结果
    for (String result : results) {
        out.println("<li>" + result + "</li>");
    }
%>
</ul>

该页面从请求参数中获取搜索关键字，模拟搜索结果，并将结果输出为ul/li元素。

最后，在Tomcat中启动网站，访问JSP页面，输入关键字并点击搜索按钮，即可在同一页面显示/search.jsp页面返回的搜索结果。

示例1：酒店订单搜索页面

搜索页面使用jsp和ajax技术，网页整体布局分为搜索部分和搜索结果部分。搜索部分有表单输入框、提交按钮，输入完成提交后，ajax发送异步请求，将搜索结果动态展示在页面上。

搜索部分html代码：

<!-- 搜索部分 -->
<div class="search">
    <form id="orderSearchForm" class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">酒店名</label>
                <div class="layui-input-inline">
                    <input type="text" name="hotelName" placeholder="请输入酒店名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <button class="layui-btn" lay-filter="search" lay-submit>查询订单</button>
        </div>
    </form>
</div>

搜索结果部分html代码：

<!-- 搜索结果部分 -->
<div class="result-list">
    <table class="layui-table">
        <colgroup>
            <col width="150">
            <col width="150">
            <col width="150">
            <col>
        </colgroup>
        <thead>
            <tr>
                <th>订单号</th>
                <th>酒店名</th>
                <th>用户名</th>
                <th>下单时间</th>
            </tr>
        </thead>
        <tbody id="orderList"></tbody>
    </table>
    <div class="page-div"></div>
</div>

js代码如下：

// 查询订单列表
function getOrderList(data) {
    $.ajax({
        type: "GET",
        url: "/order/search",
        data: data,
        success: function(res) {
            if(res.code == 0) {
                var orders = res.data;
                var html = "";
                $.each(orders, function(index, item) {
                    html += "<tr>";
                    html += "<td>" + item.orderNo + "</td>";
                    html += "<td>" + item.hotelName + "</td>";
                    html += "<td>" + item.username + "</td>";
                    html += "<td>" + item.createTime + "</td>";
                    html += "</tr>";
                });
                $("#orderList").html(html);   // 添加到页面
                renderPage(res.total, data.pageNo, data.pageSize);   // 渲染分页组件
            }
            else {
                layer.msg(res.msg, {icon: 2, time: 2000});
            }
        },
        error: function(xhr, status, error) {
            layer.msg("请求出错：" + error, {icon: 2, time: 2000});
        }
    });
}

// 监听表单提交事件
form.on('submit(search)', function(data){
    getOrderList(data.field);
    return false;
});

示例2：图片搜索页面

搜索页面使用jsp和ajax技术，将搜索框、搜索结果同样分为两个部分，搜索框部分包含搜索框和提交按钮，搜索结果部分用div元素动态展示搜索结果。

搜索部分html代码：

<!-- 搜索部分 -->
<div class="search">
    <form id="searchForm">
        <div class="search-box">
            <input type="text" name="keyword" placeholder="请输入搜索内容">
            <button type="submit" class="search-button">搜索</button>
        </div>
    </form>
</div>

搜索结果部分html代码：

<!-- 搜索结果部分 -->
<div class="search-result" id="searchResult">
</div>

js代码：

$('#searchForm').submit(function(e) {
    e.preventDefault();  // 阻止表单默认提交事件

    var keyword = $("input[name='keyword']").val();
    var url = '/image-search?keyword=' + keyword;
    $.get(url, function(data){
        var html = '';
        html += '<div class="result-title">共搜索到' + data.total + '张图片</div>';
        html += '<div class="result-container">';
        $.each(data.data, function(i, item) {
            html += '<div class="result-item">';
            html += '<a href="' + item.url + '" data-lightbox="image" data-title="' + item.title + '">';
            html += '<div class="result-image"><img src="' + item.url + '"></div></a>';
            html += '<div class="result-title">' + item.title + '</div>';
            html += '</div>';
        });
        html += '</div>';
        $('#searchResult').html(html);
    });
});

在搜索框中输入关键字，点击提交按钮后，将发送ajax请求，向/image-search页面请求搜索结果，并将结果动态展示在页面上。其中，图片结果使用lightbox插件展示图片，使得图片展示更美观。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：如何在JSP中使用ajax在同一页面显示另一个页面的搜索结果 - Python技术站