javascript 如何使用html将一个页面的值传递到另一个页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32535660/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to pass value one page to another page using html
提问by
Hi I have a Pricing table that was created in javascript, what I need to know is how to pass the values in row 1 or 2 into a aspx page using javascript with the click of a button
嗨，我有一个用 javascript 创建的定价表，我需要知道的是如何通过单击按钮使用 javascript 将第 1 行或第 2 行中的值传递到 aspx 页面
Here my code:
这是我的代码：
<select style="padding:10px;background: #cb1c69;color: #FFFFFF; font-size:18px; border-radius: 11px;">
<option>Choose Your Plan</option>
<option value="red">Monthly</option>
<option value="green">Yearly</option>
<option value="blue">Perpetual</option>
</select>
Edition:
版：
<div class="pricetable-column red box" style="width: 33.3333333333%; border-right:1px solid gray;">
<div class="pricetable-column-wall">
<div class="pricetable-header">
<div class="pricetable-fld-name">
Lite</div>
<div class="pricetable-header-inner">
<div class="pricetable-fld-price">
<span class="cur"></span>750/- Monthly</div>
<p>
( Minimum 6 Month)</p>
</div>
</div>
<div class="ribbon">
HOT</div>
<div class="pricetable-button-container1">
<a href="#">Buy Now</a>
</div>
</div>
</div>
I want if i click the buy now button and value get go to another page. I mean billing options page
我想如果我点击立即购买按钮并且价值得到去另一个页面。我的意思是结算选项页面
please help me sir
请帮帮我先生
I don't know how to use javascript.
我不知道如何使用 javascript。
update code:
更新代码：
Source code:
源代码：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Name:
<input type="text" id="txtName" name="Name" value="Mudassar Khan" /><br />
<br />
Technology:
<select id="ddlTechnolgy" name="Technology">
<option value="ASP.Net">ASP.Net</option>
<option value="PHP">PHP</option>
<option value="JSP">JSP</option>
</select>
<input type="button" id="btnQueryString" value="Send" />
<script type="text/javascript">
$(function () {
$("#btnQueryString").bind("click", function () {
var url = "MyPage2.html?name=" + encodeURIComponent($("#txtName").val()) + "&technology=" + encodeURIComponent($("#ddlTechnolgy").val());
window.location.href = url;
});
});
</script>
Destination Code:
目的地代码：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var queryString = new Array();
$(function () {
if (queryString.length == 0) {
if (window.location.search.split('?').length > 1) {
var params = window.location.search.split('?')[1].split('&');
for (var i = 0; i < params.length; i++) {
var key = params[i].split('=')[0];
var value = decodeURIComponent(params[i].split('=')[1]);
queryString[key] = value;
}
}
}
if (queryString["name"] != null && queryString["technology"] != null) {
var data = "<u>Values from QueryString</u><br /><br />";
data += "<b>Name:</b> " + queryString["name"] + " <b>Technology:</b> " + queryString["technology"];
$("#lblData").html(data);
}
});
</script>
Any problem my code:
任何问题我的代码：
采纳答案by DOTNET Team
Plese try this code according to your requirement:
请根据您的要求尝试此代码：
Source Page:
来源页面：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Name:
<input type="text" id="txtName" name="Name" value="Mudassar Khan" /><br />
<br />
Technology:
<select id="ddlTechnolgy" name="Technology">
<option value="ASP.Net">ASP.Net</option>
<option value="PHP">PHP</option>
<option value="JSP">JSP</option>
</select>
<input type="button" id="btnQueryString" value="Send" />
<script type="text/javascript">
$(function () {
$("#btnQueryString").bind("click", function () {
var url = "Page2.htm?name=" + encodeURIComponent($("#txtName").val()) + "&technology=" + encodeURIComponent($("#ddlTechnolgy").val());
window.location.href = url;
});
});
</script>
Destination Page
目的地页面
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<span id = "lblData"></span>
<script type="text/javascript">
var queryString = new Array();
$(function () {
if (queryString.length == 0) {
if (window.location.search.split('?').length > 1) {
var params = window.location.search.split('?')[1].split('&');
for (var i = 0; i < params.length; i++) {
var key = params[i].split('=')[0];
var value = decodeURIComponent(params[i].split('=')[1]);
queryString[key] = value;
}
}
}
if (queryString["name"] != null && queryString["technology"] != null) {
var data = "<u>Values from QueryString</u><br /><br />";
data += "<b>Name:</b> " + queryString["name"] + " <b>Technology:</b> " + queryString["technology"];
$("#lblData").html(data);
}
});
</script>
回答by Rayon
You have multiple options to do so:
您有多种选择：
- sessionStorage
- 会话存储
Example:
例子：
sessionStorage.setItem('key', 'value');//to set value
sessionStorage.getItem('key');//to get the value
sessionStorage.setItem('key', 'value');//to set value
sessionStorage.getItem('key');//to get the value
- localStorage
- 本地存储
Example:
例子：
localStorage.setItem('key', 'value');//to set value
localStorage.getItem('key');//to get the value
localStorage.setItem('key', 'value');//to set value
localStorage.getItem('key');//to get the value
- Cookies
- 饼干
Example: Ref
示例：参考
var createCookie = function(name, value, days) {
var expires;
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
}
else {
expires = "";
}
document.cookie = name + "=" + value + expires + "; path=/";
}
function getCookie(c_name) {
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1) {
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1) {
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
- As a key in Query string
- 作为查询字符串中的键
Ex:
前任：
http://www.example.com?myKey=myVal
http://www.example.com?myKey=myVal
回答by molecule
If I understand correctly, you want to pass values that a user selects in one page to another page. I would recommend you to pass your values using key value pairs in the URL. JavaScript has neat way of doing it. For example :
如果我理解正确，您希望将用户在一个页面中选择的值传递到另一个页面。我建议您使用 URL 中的键值对传递值。JavaScript 有很好的方式来做到这一点。例如 ：
var month = "July"
var date = "1"
var URL = "yourpage.aspx?month="+month+"&date="+date
location.href=URL
var month = "July"
var date = "1"
var URL = "yourpage.aspx?month="+month+"&date="+date
location.href=URL
By this, the URL will look something like this youpage.aspx?month=July&date=1The parameters in the URL start after the question mark "?" and the key value pairs are separated by "&". location.href will redirect your page to that URL. and then you can read these parameters using .net on the server side. I hope this helps.
这样，URL 将看起来像这样youpage.aspx?month=July&date=1URL 中的参数从问号“？”开始。并且键值对以“&”分隔。location.href 会将您的页面重定向到该 URL。然后您可以在服务器端使用 .net 读取这些参数。我希望这有帮助。
