如何将数据从 javascript 函数传递到重定向页面？
Posted
技术标签:
【中文标题】如何将数据从 javascript 函数传递到重定向页面？【英文标题】：How to pass data from javascript function to redirected page? 【发布时间】：2020-07-21 07:39:26 【问题描述】：const db = firebase.firestore();
function getDataOfBus()
var dates = document.getElementById('departure-date').value.toString();
var fromd = document.getElementById('from-dest').value.toString()
var tod = document.getElementById('to-dest').value.toString()
console.log(dates + " -" + fromd + " -" + tod)
db.collection('Buses').where("DepartureDate", "==", dates).where("To", "==", tod).
where("From", "==", fromd).get().then((snapshot) =>
let html = '';
snapshot.forEach((busDatas) =>
busData = busDatas.data()
// console.log(busData.id)
busData.docId = busDatas.id
html += `
<div class="single-room-area d-flex align-items-center
mb-50 wow fadeInUp" data-wow-delay="100ms" id="prince">
<div class="room-thumbnail">
<img src="$busData.ImageLink" >
</div>
<div class="room-content">
<h2><a href="javascript:getID('$busData.docId');">$busData.TourName</h2>
<h6>$busData.From to $busData.To</h6>
<h4>₹ $busData.SeatPrice </h4>
<div class="room-feature">
<h6>Boarding Point <span>$busData.BoardingTime</span></h6>
<h6>Dropping Point <span>$busData.DroppingTime</span></h6>
<h6>Seats Left <span>$busData.SeatsLeft</span></h6>
<h6>Total Time <span>$busData.TotalTime</span></h6>
<h6>Departure Date <span>$busData.DepartureDate</span></h6>
</div>
</div>
</div> `
document.getElementById('bus-container-dynamic').innerHTML = html;
) // End foreach
) // End then
function getID(id)
db.collection('Buses').doc(id).get().then((doc) =>
let html = '';
var data = doc.data();
html += `<h1>$data.TourName </h1>`
document.getElementById('div-1').innerHTML = html;
window.location = "single-bus.html"
).catch((e) =>
console.log(e);
)
我已执行此代码以在 html 页面中显示过滤后的文档，在该页面中我正在获取用户单击的文档的 ID，但我无法执行此操作，我想将其重定向到“单总线”。 html”单击时，我想将该 id 发送到下一页“single-bus.html”，我想使用该 id 在使用该 id 的 html 文件中显示数据。
<!-- single-bus.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
</head>
<body>
<div class="classer" id="div-1">
</div>
<script src="./loader.js"></script>
</body>
</html>
【问题讨论】：
【参考方案1】：对不起我的英语。
据我了解，您希望使用 window.location 将文档 ID 从页面 A 发送到页面 B。
嗯，下一个例子就是我找到的解决方案。
页面 A 如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
// redirect user to some site with a parameter called 'documentParam' which value = 123
window.location = 'some-site.html?documentParam=123'
</script>
</html>
注意使用问号? 将参数放置在URL 中。如果您需要更多参数，可以使用 & 将它们分隔开，在此处阅读有关查询参数的更多信息：What is the difference between URL parameters and query strings?
页面 B 如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
// this page expects one parameter called 'documentParam'
var urlParams = new URLSearchParams(window.location.search);
console.log(urlParams.has('post')); // false --- no parameter called 'post'
console.log(urlParams.get('documentParam')); // "123"
alert(urlParams.get('documentParam'));
</script>
</html>
此解决方案使用查询参数并使用 JavaScript 从 URL 读取它们。我认为您可以根据自己的需要调整这个想法。
您可以在这里阅读更多内容：How can I get query string values in JavaScript?
【讨论】：
以上是关于如何将数据从 javascript 函数传递到重定向页面？的主要内容，如果未能解决你的问题，请参考以下文章
如何从 Blade 格式 HTML 将 PHP 变量传递给 JavaScript 函数