如何使用html将一个页面的值传递给另一个页面
Posted
技术标签:
【中文标题】如何使用html将一个页面的值传递给另一个页面【英文标题】：how to pass value one page to another page using html 【发布时间】：2015-12-08 17:37:54 【问题描述】：您好，我有一个在 javascript 中创建的定价表，我需要知道的是如何通过单击按钮使用 javascript 将第 1 行或第 2 行中的值传递到 aspx 页面
这是我的代码：
<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>
版本：
<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>
如果我单击“立即购买”按钮并获得价值，我想要转到另一个页面。我的意思是计费选项页面
先生，请帮帮我
我不知道如何使用javascript。
更新代码：
源代码：
<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>
目的地代码：
<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>
我的代码有任何问题：
【问题讨论】：
***.com/questions/7267519/… 先生，我不知道先生 javascript 如果你不介意你能在 jsfiddle@eugensunic 中运行代码吗 如果你不懂 JS 你需要去rentacoder - 这个网站不适合 gimmetehcodez 类型的问题 现在我尝试源页面：和目标页面 第一页正常，但第二页没有打开 【参考方案1】：请根据您的要求尝试此代码：
来源页面：
<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>
目标页面
<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>
【讨论】：
我点击发送按钮打开第二页但不显示值 @dotnet 请解释一下你做了什么 嗨，我在这里使用查询字符串。源页面有一个带有 jQuery Click 事件处理程序的 HTML 按钮。单击按钮时，名称文本框和技术下拉列表的值设置为 QueryString 参数，然后页面被重定向到目标页面 现在我尝试 Source Page: 和 Destination Page 。第一页有效，但第二页值未打开。先生，我该怎么办。 请浏览此网址，这将对您有所帮助：aspsnippets.com/Articles/…【参考方案2】：您有多种选择：
-
会话存储
例子：
sessionStorage.setItem('key', 'value');//to set value
sessionStorage.getItem('key');//to get the value
-
本地存储
例子：
localStorage.setItem('key', 'value');//to set value
localStorage.getItem('key');//to get the value
-
Cookie
示例：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 "";
-
作为查询字符串中的键
例如：
http://www.example.com?myKey=myVal
【讨论】：
我能理解先生，但我不懂javascript。先生，我能做什么 JSFiddle 不能轻易地展示它是如何在两个页面上工作的【参考方案3】：如果我理解正确，您希望将用户在一个页面中选择的值传递到另一个页面。我建议您使用 URL 中的键值对来传递您的值。 JavaScript 有很好的方法。例如：
var month = "July"
var date = "1"
var URL = "yourpage.aspx?month="+month+"&date="+date
location.href=URL
这样，URL 将类似于 youpage.aspx?month=July&date=1
URL 中的参数在问号“？”之后开始。键值对用“&”分隔。 location.href 会将您的页面重定向到该 URL。然后您可以在服务器端使用 .net 读取这些参数。我希望这会有所帮助。
【讨论】：
以上是关于如何使用html将一个页面的值传递给另一个页面的主要内容，如果未能解决你的问题，请参考以下文章