ton*_*nga 46 html javascript forms
我有两个HTML页面:form.html和display.html.在form.html中,有一个表单:
<form action="display.html">
<input type="text" name="serialNumber" />
<input type="submit" value="Submit" />
</form>
Run Code Online (Sandbox Code Playgroud)
表单数据将发送到display.html.我想serialNumber在display.html中显示和使用表单数据,如下所示:
<body>
<div id="write">
<p>The serial number is: </p>
</div>
<script>
function show() {
document.getElementById("write").innerHTML = serialNumber;
}
</script>
</body>
Run Code Online (Sandbox Code Playgroud)
那么我如何将serialNumber变量从form.html传递给display.html,以便display.html中的上述代码显示序列号,而JavaScript函数show()serialNumber从第一个HTML中获取?
Ric*_*uen 35
如果您无法使用服务器端编程(例如PHP),则可以使用查询字符串或GET参数.
在表单中,添加一个method="GET"属性:
<form action="display.html" method="GET">
<input type="text" name="serialNumber" />
<input type="submit" value="Submit" />
</form>
Run Code Online (Sandbox Code Playgroud)
当他们提交此表单时,将将用户定向到包含该serialNumber值作为参数的地址.就像是:
http://www.example.com/display.html?serialNumber=XYZ
Run Code Online (Sandbox Code Playgroud)
然后,您应该能够serialNumber使用以下window.location.search值从JavaScript 解析查询字符串(包含参数值):
// from display.html
document.getElementById("write").innerHTML = window.location.search; // you will have to parse
// the query string to extract the
// parameter you need
Run Code Online (Sandbox Code Playgroud)
另请参见JavaScript查询字符串.
另一种方法是在提交表单时将值存储在cookie中,并在display.html页面加载后再次从cookie中读取它们.
Jos*_*ard 10
您需要从查询字符串中获取值(因为您没有方法集,默认情况下使用GET)
使用以下教程.
http://papermashup.com/read-url-get-variables-withjavascript/
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
Run Code Online (Sandbox Code Playgroud)
另一种选择是使用“localStorage”。您可以在另一个页面中使用 javascript 轻松请求该值。
在第一页上,您使用以下 JavaScript 代码片段来设置 localStorage:
<script>
localStorage.setItem("serialNumber", "abc123def456");
</script>
Run Code Online (Sandbox Code Playgroud)
在第二页上,您可以使用以下 JavaScript 代码片段检索该值:
<script>
console.log(localStorage.getItem("serialNumber"));
</script>
Run Code Online (Sandbox Code Playgroud)
在 Google Chrome 上,您可以按 F12 > 应用程序 > 本地存储来可视化这些值。
来源: https: //www.w3schools.com/jsref/prop_win_localstorage.asp
| 归档时间: |
|
| 查看次数: |
282151 次 |
| 最近记录: |