利用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

原文地址:https://www.cnblogs.com/fhuafeng/p/2371209.html