html页面跳转传递参数

html-css012

html页面跳转传递参数,第1张

页面跳转的时候可能需要一些数据的传输,如商品跳转到详情页需要传一个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>