Question

我之前问了一个类似的问题，但后来意识到我需要使用javascript这一点。这是我的情况：

我有一个购物网站，产品x和“购买”按钮。 “购买”按钮链接到结帐页面，以及具有2个全局变量的“javascript”函数，称为“product”和“price”。我想在结帐页面上显示这两个变量，这将根据用户按下的“购买”按钮自动更新。

var x = "iPhone";
var xprice = 199.99;
var product;
var price;

function productX(){
    product = x;
    price = xprice;
}

^^^^不起作用。它将简单地在写入变量的区域中传递“undefined”。如果他们能理解我想要做什么，有人可以帮助我吗？

我只想让确认页面显示该人将要购买的产品，价格取决于用户按下的购买按钮。我似乎无法使用JavaScript工作。我不想使用PHP，数据库或cookie。

谢谢

Answer 1

如果您想将值传递到第二页，则需要将它们附加到第二页链接的URL。

假设您的第二页称为结帐。您可以按照以下方式链接到结帐页面：

<a href="checkout">Checkout</a>

现在您无法使用表单提交来执行此操作...请在此处阅读以获取更多信息： submitting a GET form with query string params and hidden params disappear

您需要自己构建查询字符串..（这是?something=10&somethingelse=20）部分。

您需要做的是通过事件监听器将JavaScript函数附加到单击按钮。您还需要为您的链接提供ID。此功能有两个参数，即项目的价格和名称。

<a id="checkout" href="checkout">Checkout</a>

function checkout(price, name)
{
  document.getElementById('checkout').href += "?price="+price+"&name="+name;
}

第二个页面已加载，您需要通过将字符串值拆分为数组来从URL中检索这些值。

见这里： How to get the value from the GET parameters?

Answer 2

好吧，鉴于您尝试将数据从一个页面传递到另一个页面，没有PHP或cookie，这将很难。

假设您有一个带有“购买按钮”的表单转到下一页，您可以设置表单的action =“GET”，并在表单中有2个隐藏字段：

<input id="productInput" type="hidden" name="prpduct" value="" \>
<input id="priceInput" type="hidden" name="price" value="" \>

然后，我们需要将您的功能更改为：

function productX(){
document.getElementById("productInput").value = x;
document.getElementById("priceInput").value = xprice;
}

然后让javascript通过GET将值传递到下一页。

不可否认，javascript并非专为此而设计。因此，要在下一页上获取这些值，您必须使用以下功能：

function GetFromUrl(url, key) {
var pairs = url.substring(url.indexOf('?') + 1).split('&');
for (var i = 0; i < pairs.length; i++) {
  var pair = pairs[i].split('=');
  if(key == pair[0])
     return pair[1];
}
return null;
}

（感谢卡萨布兰卡在这里Make a JavaScript array from URL我修改了他的功能）

然后，在正文的onload中，使用以下命令调用此函数：

product = GetFromUrl(window.location, "productInput");
price = GetFromUrl(window.location, "priceInput");

从这里开始，您将需要执行一些document.getElementById（）内容来修改实际页面。

很抱歉，如果我不是很具描述性......

使用带有按钮的JS功能来显示变量

2 个答案: