javascript - window.location 结果为空
问题描述
我想建立一个从数据库返回产品的网站,当点击查看更多时,应该在另一个 html 页面中从服务器返回产品详细信息。问题是当我点击查看更多时,productID%20=%20null :(.
productDetails = second html page.productDetails = div - in index.html 产品从服务器返回的地方
<script>
var productsUrlList = 'https://finalonlineshop.firebaseio.com/.json';
async function getProductsFromServer() {
var productsResponse = await fetch(productsUrlList)
var products = await productsResponse.json();
return products;
}
async function showProducts(productsPromise) {
var products = await productsPromise;
var generatedHTML = '';
var productsIDs = Object.keys(products);
productsIDs.forEach(productID => {
var product = products[productID];
generatedHTML += getGeneratedHTMLForProduct(productID, product);
});
document.getElementById('categories').innerHTML = generatedHTML;
}
function getGeneratedHTMLForProduct(productID, product) {
var generatedHTML = `
<div id = categoriesDiv>
<img class = "categoryImage" src = ${product.Image} />
<div class = "categoryName">${product.Name}</div>
<div class = "categoryPrice">$ ${product.Price}</div>
<br>
<button id = "seeMore" onclick = "seeMore('${productID}')">See
more</button>
</div>
`;
return generatedHTML;
}
function seeMore (productID) {
window.location = `./productDetails.html?productID = ${productID}`;//issue
}
function getProductIDFromUrl () {
var params = new URLSearchParams(window.location.search);
var productID = params.get('productID');
return productID;
}
async function getDetailsFromServer(productID) {
var detailsResponse = await fetch(`https://finalonlineshop.firebaseio.com/Products/details/${productID}.json`);
var details = await detailsResponse.json();
return details;
}
async function seeDetails(detailsPromise) {
var details = await detailsPromise;
var generatedHTML = `
<div id = "detailsAboutProduct">
<img src = "${details.Image}" /> //Cannot read property "Image" of null
<div>${details.Name}</div>
<div>${details.Details}</div>
<div>$ ${details.Price}</div>
<div>${details.Qty}</div>
<button id = "addToCart" onclick = "addToCart();">Add to
cart</button>
</div>
`;
document.getElementById('details').innerHTML = generatedHTML;
}
</script>
解决方案
去掉=
URL 中 . 周围的空格,这些空格被编码为%20
. 您还应该使用encodeURIComponent()
转义产品 ID 中的任何特殊字符。
function seeMore (productID) {
window.location = `./productDetails.html?productID=${encodeURIComponent(productID)}`;
}
推荐阅读
- python - 如何在 Python 中并行运行两个 GUI?
- javascript - --prod 在构建 Ionic 3 应用程序时不起作用
- html - 为什么我不能正确链接导航栏?
- java - 它们是 java 根包中的任何类/类吗
- dart - Flutter 系统导航栏和状态栏颜色
- vba - 无法以有效的方式切换到新标签
- c++ - DXGI 截屏图像失真
- ruby - Ruby正则表达式提取2个标签之间的内容
- mongodb - 我们什么时候应该在 MongoDB 中使用嵌入式文档?
- javascript - 烧瓶 request.get_json() 没有收到来自 $.post() 请求的任何内容