根据我的问题，我有一个表，显示JSON链接中的所有数据。每一行都将有一个视图按钮，用于显示数据的详细信息。详细信息将显示在下一页。我使用表单隐藏的输入将行id发送到下一页。但是，在我点击按钮"之后，在下一页没有id显示；视图"；。下面是我的代码示例：
index.html
<div >
<table id="mypanel">
<tr>
<th>Report ID</th>
<th>Task Name</th>
<th>Report</th>
<th>Action</th>
</tr>
</table>
</div>
<script>
$.getJSON('https://testing.com/testing.asmx/ot_displayTask?badgeid=10010079&reportStatus=&status=yes', function(data) {
$.each(data.otReportList, function(key, data){
// console.log(key, data);
let current_datetime = new Date(data["report_date"])
let formatted_date = current_datetime.getDate() + "-" + (current_datetime.getMonth() + 1) + "-" + current_datetime.getFullYear()
var text = `<tr>
<td>${data["report_id"]}</td>
<td>${data["task_name"]}</td>
<td>${formatted_date}</td>
<td>
<form method="POST" action="read.html">
<input type="hidden" name="report_id" id="report_id" value="${data["report_id"]}">
<button type="submit">View</button>
</form>
</td>
</tr>`
$("#mypanel").append(text);
})
});
</script>
read.html
<html>
<head>
</head>
<body>
<h2>Input 1: <span id='result1'></span></h2>
</body>
</html>
<script>
window.addEventListener('load',() =>{
const params = (new URL(document.location)).searchParams;
const report_id = params.get('report_id');
document.getElementById('result1').innerHTML=report_id;
})
</script>
有人知道怎么解决吗？
您需要将方法更改为GET，以便报表id数据以querystring的形式出现。
<form method="GET" action="read.html">
<input type="hidden" name="report_id" id="report_id" value="${data["report_id"]}">
<button type="submit">View</button>
</form>
然后在你的read.html->JS:-
var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]});
console.log(queryDict.report_id);
上面的位置querystring来自如何在JavaScript中获取查询字符串值？