如何将信息从一个html页面传递到另一个

这里的第一个问题。我以HTML5一家唱片店的网站，一个网页（store.html）显示所有的专辑和每一个下面有一个链接立即购买按钮buy.html如何将信息从一个html页面传递到另一个

<div class="item goth rock folk cd"> 
<div class="card-izotop-img"> 
<img src="img/vinyl/wolfe_abyss.jpg" alt="Chelsea Wolfe - Abyss"> 
</div> 
<div class="card-izotop-info"> 
<h6>Chelsea Wolfe - Abyss</h6> 
<h5>€ 25</h5>        
<a href="vinyl/buy.html">Buy Album</a> 
</div> 
</div>

的buy.html页面对于本页面中的所有专辑都是常见的。我想要做的是以某种方式将点击的相册中的信息（在store.html页面上）传递给buy.html页面。所以如果有人点击上面的例子，他会得到文字说：你想买“切尔西沃尔夫 - 深渊”在“25”欧元

而其他人点击不同的专辑会得到该专辑的信息。请注意，我没有使用表单，我在这里找到的大多数答案都使用表单作为解决方案。

由于这是一家独立的唱片店，我想避免每月向Shopify或Paypal等付费和佣金，所以我正在尝试一个简单的解决方案。如果你能指引我走向一个方向，我可以找到解决方法。谢谢

来源

2017-05-07 Steliosc

您可以在href使用的查询参数：''Buy Album。然后在购买页面中，使用JavaScript解析URL并获取'albumId'。 –

更广泛地说，编写应用程序需要比HTML提供的更多功能，您将需要一种编程语言。您可以使用JavaScript或服务器端使用您喜欢的任何语言来执行此客户端。 –

谢谢，我会用js来尝试客户端解决方案，这似乎更简单。 – Steliosc

嗯，是的，第一个选项将信息从一个页面传递到另一个将是一种形式。因为你不想使用它，所以有第二种方法是将信息作为查询字符串传递给你将要访问的URL。

Syntax is as follows: 
url?<query_string> where 
query_string is parameter1=value1&parameter2=value2&... so on 

Example: 
<a href="vinyl/buy.html?albumId=Chelsea_Wolfe_Abyss&price=25">Buy Album</a>

点要记住，而使用查询字符串：当通过空格或特殊字符，更喜欢通过他们的URL编码前的值。有一个JavaScript函数encodeURIComponent（）来对它们进行编码，因为直接在URL中传递时空格等可能是不安全的。

encodeURIComponent('Chelsea Wolfe - Abyss') will result in: 
Chelsea%20Wolfe%20-%20Abyss

来源

2017-05-07 17:57:23 SKSpall

我想你应该使用PHP + MYSQL来做到这一点。你应该：

广场约专辑到数据库中的所有数据约专辑数据库
返回的数据，你会显示
显示专辑，并记录编号参数福克斯例如链接的列表：

<a href="vinyl/buy.php?a=1">Buy album</a>

<a href="vinyl/buy.php?a=2">Buy album</a>
从数据库中选择一行，并记录您从URL获得的编号。

您将使用代码[email protected]$_GET[a]; 和使用$ record_number选择从数据库专辑信息

关于这张专辑，你想

显示信息显示得到Recond（活化）号

来源

2017-05-07 18:39:30

非常感谢，我会考虑解决方案，在我尝试这个之前将信息作为URL中的查询字符串传递，看起来更简单:) – Steliosc

我试图做的是某种方式传递从专辑信息点击（上 store.html页）到b uy.html页面。

如果你正在寻找一个解决方案HTML5，一个方法是使用HTML5 的localStorage。

您可以set名称 - 值对localStorage（它会记住他们在整个网站的每个页面上）。

当您想要检索这些值时，您可以从localStorage返回get，并使用它们填充object。

从那时开始（在该页面上），您可以询问object。

例子：

var selectedAlbum = {}; 
 
var prices = document.querySelectorAll('.item a'); 
 

 

 
function selectAlbum() { 
 
    var item = this.parentNode; 
 

 
    localStorage.setItem('selectedAlbumTitle', item.getElementsByTagName('h2')[0].textContent); 
 
    localStorage.setItem('selectedAlbumPrice', item.querySelector('.price').textContent); 
 

 
    selectedAlbum.title = localStorage.getItem('selectedAlbumTitle'); 
 
    selectedAlbum.price = localStorage.getItem('selectedAlbumPrice'); 
 

 
    console.log('Title: ' + selectedAlbum.title); 
 
    console.log('Price: ' + selectedAlbum.price); 
 
} 
 

 

 
for (var i = 0; i < prices.length; i++) { 
 
    prices[i].addEventListener('click', selectAlbum, false); 
 
}

.item { 
 
float: left; 
 
width: 200px; 
 
} 
 

 
.item h2 { 
 
font-size: 12px; 
 
} 
 

 
.item .price { 
 
font-size: 24px; 
 
font-weight: bold; 
 
} 
 

 
.item a:hover { 
 
font-weight: bold; 
 
cursor: pointer; 
 
}

<div class="item goth rock folk cd"> 
 
<div class="card-izotop-info"> 
 
<h2>Chelsea Wolfe - Abyss</h2> 
 
<p class="price">&euro; 25</p>        
 
<a>Buy Album</a> 
 
</div> 
 
</div> 
 

 
<div class="item goth rock folk cd"> 
 
<div class="card-izotop-info"> 
 
<h2>King Dude - Burning Daylight</h2> 
 
<p class="price">&euro; 20</p>        
 
<a>Buy Album</a> 
 
</div> 
 
</div>

来源

2017-05-08 12:11:29 Rounin

如何将信息从一个html页面传递到另一个

回答

相关问题