页面跳转的时候可能需要一些数据的传输,如商品跳转到详情页需要传一个id过去。那么在html中如何来实现呢?
简单的来说就是通过location.href设置路径的时候通过?拼接的形式拼接进去一些参数。然后在b页面通过地址栏的信息来拿到这些参数,从而进行不同的数据渲染。
例子:
a页面内容:
b页面:
html把一个页面的数据传到另一个页面的方法和操作步骤如下:
1、首先,打开我们计算机上的网页编程软件,然后创建两个新的html页面,如下图所示。
2、其次,第一个新的html页面的代码如下图所示,它是带有文本段落的空白页。 第一页将引用第二页的table表格,如下图所示。
3、接着,在浏览器中打开第一页,会看到只有一行文本,如下图所示。
4、然后,新的第二个html页面存储一个表,如下图所示。
5、随后,我们在浏览器中打开第二个html页面,可以看到表格的效果,如下图所示。
6、接着,在第一个html页面index1.html文件中添加<iframe src="index2.html"></iframe>代码,并引用第二个html页面的index2.html中的table表格,如下图所示。
7、最后,保存代码后,在浏览器中打开index1.html页面,可以看到成功引用另一个页面的table表格,如下图所示。
1、使用表单传递数据
两个html页面,a.html,b.html想。把a.html中的表单form中的id和pwd传到b.html中
<form action="b.html" method="post" name="formName"></form>要用form表单配合后台语言来传,发送类型POST和GET看你需求要换。
2、使用JS传递接收数据
<html1 ><input type="text" value="nihao" id="text"></html>
<html2></html>
如何用JS把HTML1中的text属性值nihao 传递给html2 在HTML2中有怎样用JS接收传递过来的数据并显示。
<html1><a href="html2.html?word=nihao"><a><html2>
js代码:
var str=location.href.search//取地址参数部分word = str.sbustr(str.indexOf('=')+1)
word就可以获得地址中传递的参数了;如果有多个参数可以用split函数
3、两个纯Html之间的传值实例
index1.htm页面
<HTML><HEAD>
<TITLE> New Document </TITLE>//标题
<SCRIPT LANGUAGE="JavaScript"> //调用JavaScript方法
function show(){
var result = document.getElementByIdx("name").value //获取值.
location.href="index2.htm?name="+result // 链接跳转
}
</SCRIPT>
<style>.input7 {color: #999width:145pxheight:20pxborder: 1px solid #CCCCCC font-size:12pxbackground-color: #fff}//css样式
</style>
</HEAD>
<BODY>
<input type="text" id="name" class="input7"><input type="button" value="OK" onclick="show()"/>//输出
</BODY>
</HTML>
index2页面:
<HTML><HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">
function getvalue(name){
var str=window.location.search //location.search是从当前URL的?号开始的字符串
if (str.indexOf(name)!=-1)//判断是否收到值
{
var pos_start=str.indexOf(name)+name.length+1 //解析获取值
var pos_end=str.indexOf("&",pos_start)
if (pos_end==-1){
alert( str.substring(pos_start)) //输出
}
else{
alert("没有此值~~")
}
}
</SCRIPT>
</HEAD>
<BODY>
<input type="button" onclick="getvalue('show')" value="GetValue"/>
</BODY>
</HTML>