如何在JSP中让searchResult内的表单提交后仅更新自身div？

问题描述 #

我的JSP页面中有两个<div>结构：

<div id="searchCriteria">
// 引入带搜索按钮的搜索条件JSP
</div>
<div id="searchResult">
// 引入带<previous><next>导航的搜索结果JSP
</div>

需求：点击上一页/下一页导航链接时，提交#searchResult内的表单，仅更新该div，不刷新整个页面。尝试过document.querySelector('#searchResult form').submit()，但会触发整页刷新，求解决办法。

核心解决方案 #

用异步请求（AJAX）提交表单，将后端返回的搜索结果HTML片段直接替换#searchResult的内容，避免整页刷新。以下提供两种常用实现方式：

方法1：原生JavaScript（Fetch API） #

假设分页导航链接带有data-page属性存储页码，代码如下：

// 给所有分页链接绑定点击事件
document.querySelectorAll('#searchResult .pagination-link').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认跳转行为

    const form = document.querySelector('#searchResult form');
    const formData = new FormData(form);
    
    // 将页码参数加入表单数据
    const pageNum = this.dataset.page;
    formData.append('page', pageNum);

    // 异步提交表单
    fetch(form.action, {
      method: form.method,
      body: formData
    })
    .then(response => response.text())
    .then(html => {
      // 用返回的HTML更新目标区域
      document.getElementById('searchResult').innerHTML = html;
    })
    .catch(error => {
      console.error('请求出错:', error);
    });
  });
});

方法2：jQuery（适合已有jQuery的项目） #

代码更简洁，同样假设分页链接带有data-page属性：

// 委托绑定点击事件（兼容动态生成的分页链接）
$('#searchResult').on('click', '.pagination-link', function(e) {
  e.preventDefault();
  
  const $form = $('#searchResult form');
  const pageNum = $(this).data('page');
  
  // 更新表单内的页码参数
  $form.find('input[name="page"]').val(pageNum);
  
  // 异步提交并更新区域
  $.ajax({
    url: $form.attr('action'),
    method: $form.attr('method'),
    data: $form.serialize(),
    success: function(html) {
      $('#searchResult').html(html);
    },
    error: function(xhr, status, error) {
      console.error('请求失败:', error);
    }
  });
});

后端注意事项 #

• 后端处理分页请求时，仅返回#searchResult对应的HTML片段，不要返回包含<html>、<head>等标签的完整页面
• 确保表单中包含分页所需的必要参数（如每页条数、搜索条件等），避免请求丢失筛选条件

内容的提问来源于stack exchange，提问作者Man Nat