利用javascript实现 HTML 页面间传参数

 

单纯的html页面是无法实现跨页面传值的,必须依靠js来解决。下面的例子,从a页面输入001搜索,b页面显示搜索的结果:

a.html code

1

2

3

4

5

6

<form method="get" action="b.htm">

  <input type="text" name="uid">

  <br/><br/>

  <input type="submit" value="Search">

  <br/>

</form>

b.html code

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

<head>

<script type="text/javascript" >

function Request(strName) 

{ 

	var strHref = window.document.location.href; 

	var intPos = strHref.indexOf("?"); 

	var strRight = strHref.substr(intPos + 1); 

 

	var arrTmp = strRight.split("&"); 

	for(var i = 0; i < arrTmp.length; i++) 

	{ 

		var arrTemp = arrTmp[i].split("="); 

		if(arrTemp[0].toUpperCase() == strName.toUpperCase()) return arrTemp[1]; 

	} 

	return ""; 

}

</script>

</head>

<body>

<table border="1" width="300">

  <tr bgcolor="gray">

    <td height="25">ID</td>

    <td>NAME</td>

  </tr>

  <tr id="div001" style="display: none;">

    <td height="25">001</td>

    <td>Wang</td>

  </tr>

  <tr id="div002" style="display: none;">

    <td height="25">002</td>

    <td>Zhang</td>

  </tr>

</table>

<script type="text/javascript" >

var uidtemp = Request("uid");

if(uidtemp=="001") {

	document.getElementById("div001").style.display="";

} else {

	document.getElementById("div001").style.display="none";

}

if(uidtemp=="002") {

	document.getElementById("div002").style.display="";

} else {

	document.getElementById("div002").style.display="none";

}

 </script>

</body>

 

**************************************************************************************

**************************************************************************************

 

index.htm?参数1=数值1&参数2=数值2&参数3=数据3&参数4=数值4&...... php程序员之家

静态html文件js读取url参数 根据获取html的参数值控制html页面输出


一、字符串分割分析法。


  这里是一个获取URL带QUESTRING参数的JAVASCRIPT客户端解决方案,相当于asp的request.querystring,PHP的$_GET

函数:

<Script language="javascript">

function GetRequest() { 

   var url = location.search; //获取url中"?"符后的字串

   var theRequest = new Object();

   if (url.indexOf("?") != -1) { 

      var str = url.substr(1); phperz.com

      strs = str.split("&"); 

      for(var i = 0; i < strs.length; i ++) {

         theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]); 

      } 

   }


   return theRequest;


}

</Script>

然后我们通过调用此函数获取对应参数值:

<Script language="javascript">

var Request = new Object();


Request = GetRequest();

var 参数1,参数2,参数3,参数N;


参数1 = Request['参数1']; php程序员站

参数2 = Request['参数2'];

参数3 = Request['参数3'];

参数N = Request['参数N']; 

</Script>

以此获取url串中所带的同名参数


二、正则分析法。

function GetQueryString(name)

{   

    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");

    var r = window.location.search.substr(1).match(reg);

    if (r!=null) return unescape(r[2]); return null;

}

alert(GetQueryString("参数名1"));

alert(GetQueryString("参数名2"));

alert(GetQueryString("参数名3")); 

本文来自PHP程序员站,转载请注明出处: http://www.phperz.com/web-design/javascript/011QR46201218246.html

 

你可能感兴趣的:(JavaScript)