JavaScript/JSON：如何将表单隐藏域数据成功传递至下一页

逻辑不匹配导致参数读取失败：

• index.html 内的表单设置为method="POST"，提交时report_id参数会被封装在请求体中发送，不会附加到跳转后的页面URL查询字符串上
• read.html 中用URLSearchParams读取参数的逻辑，仅能解析URL上拼接的GET类查询参数，自然无法取到POST提交的report_id值

方案1：最小改动适配现有读取逻辑 #

直接将index.html中表单的提交方法从POST改为GET，提交后参数会自动拼接在跳转URL上，现有read.html的参数读取代码完全不需要调整：

<form method="GET" action="read.html">

适用场景：report_id为非敏感的公开标识，不需要隐藏在请求体中传递，这是最快的修复方式。

方案2：保留POST提交逻辑的稳定实现 #

静态前端页面场景下，纯读取POST请求体参数的方式兼容性差（刷新页面、直接访问目标页都会丢失参数），更推荐用前端会话存储传递参数，不需要依赖表单提交：

• 调整index.html的表格渲染逻辑，去掉原有表单结构，给查看按钮绑定点击跳转逻辑：

// 表格行渲染部分
var text = `<tr>
                <td>${data["report_id"]}</td>
                <td>${data["task_name"]}</td>
                <td>${formatted_date}</td>
                <td>
                    <button type="button" class="view-btn" data-report-id="${data["report_id"]}">View</button>
                </td>
            </tr>`
$("#mypanel").append(text);

// 全局绑定按钮点击事件
$("#mypanel").on("click", ".view-btn", function(){
    const currentId = $(this).attr("data-report-id");
    // 把当前行的ID存在会话存储中
    sessionStorage.setItem("current_report_id", currentId);
    // 跳转到详情页
    window.location.href = "read.html";
})

• 调整read.html的参数读取逻辑，从会话存储中取值：

window.addEventListener('load',() =>{
    const report_id = sessionStorage.getItem("current_report_id");
    document.getElementById('result1').innerHTML = report_id || "未获取到对应报告ID";
})

• 原有代码循环生成每一行隐藏域时，给所有input设置了相同的id="report_id"，DOM中id选择器只会匹配第一个出现的元素，后续如果通过id取input值，会出现和当前点击行不匹配的问题，用data属性存储自定义值可以避免这类问题
• 本地直接打开html文件的场景下，部分浏览器会拦截POST方式的表单提交，这类场景下使用GET或sessionStorage传参的兼容性更好

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