如何让HTML表单提交后在同页面下方显示目标JSP且保留表单数据？

嗨，作为J2EE新手遇到这个页面跳转的问题太正常啦，我给你两个实用的方案，帮你轻松实现需求：

方案一：用AJAX异步提交（推荐，无刷新体验更好） #

这个方法能让表单提交后不跳转页面，直接在表单下方加载图表，同时输入框里的数据会原封不动保留，用户体验更流畅。

步骤&代码示例： #

1. 修改HTML表单：给表单加个ID，同时给输入框加上数据回显的EL表达式（防止意外刷新后丢失数据）：

<form id="chartForm" method="post">
  <label>输入图表数据：</label>
  <input type="text" name="chartData" value="${param.chartData}" placeholder="请输入数据">
  <!-- 其他表单输入项同理，用${param.参数名}回显内容 -->
  <button type="submit">生成图表</button>
</form>
<!-- 专门用来显示图表的容器 -->
<div id="chartDisplayArea"></div>

2. 添加JavaScript处理提交：这里提供两种写法，新手可以优先选jQuery版本，代码更简洁：

jQuery版本：

<!-- 先引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
  // 拦截表单的默认提交行为
  $('#chartForm').submit(function(e) {
    e.preventDefault();
    
    // 自动收集所有表单数据
    var formData = $(this).serialize();
    
    // 发送请求到你的图表生成JSP页面
    $.ajax({
      url: 'yourChartGenerator.jsp', // 替换成你实际的JSP路径
      type: 'POST',
      data: formData,
      success: function(response) {
        // 把JSP返回的图表内容插入到容器中
        $('#chartDisplayArea').html(response);
      },
      error: function() {
        alert('生成图表失败啦，检查一下数据或者JSP代码吧！');
      }
    });
  });
});
</script>

原生JS版本（无需依赖jQuery）：

<script>
document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('chartForm');
  form.addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(form);
    const xhr = new XMLHttpRequest();
    
    xhr.open('POST', 'yourChartGenerator.jsp', true);
    xhr.onload = function() {
      if (xhr.status === 200) {
        document.getElementById('chartDisplayArea').innerHTML = xhr.responseText;
      } else {
        alert('生成图表失败啦，检查一下数据或者JSP代码吧！');
      }
    };
    
    xhr.send(formData);
  });
});
</script>

3. 调整你的JSP页面：确保JSP只返回图表相关的内容（比如<img>标签、canvas渲染代码），不要输出完整的<html>/<head>/<body>结构，不然AJAX插入后会破坏原有页面结构。

方案二：用iframe嵌入（简单直接，适合快速实现） #

如果不想写太多JS，也可以用iframe来承载JSP生成的图表，表单提交后内容会在iframe里显示，同时表单数据也能通过EL表达式回显。

代码示例： #

<form action="yourChartGenerator.jsp" method="post" target="chartFrame">
  <input type="text" name="chartData" value="${param.chartData}" placeholder="请输入数据">
  <!-- 其他输入项 -->
  <button type="submit">生成图表</button>
</form>
<!-- 用来显示图表的iframe，去掉边框并设置合适的高度 -->
<iframe name="chartFrame" id="chartFrame" style="width: 100%; min-height: 400px; border: none;"></iframe>

注意点： #

• 同样要确保JSP只返回图表内容，不要完整的HTML页面，不然iframe里会出现重复的页面结构。
• ${param.chartData}是EL表达式，用来回显用户之前输入的数据，这样表单提交后输入框里的内容不会消失。

额外小贴士： #

• 如果你用JFreeChart这类工具生成图表，JSP里可以输出<img src="chartServlet?data=${param.chartData}">，让Servlet负责生成并返回图表图片。
• 测试时要注意表单输入项的name属性和JSP中获取参数的名称一致，不然会拿不到用户输入的数据哦！

内容的提问来源于stack exchange，提问作者MD KAMRAN AZAM