zoukankan      html  css  js  c++  java
  • 利用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

  • 相关阅读:
    [IDEs]Eclipse For Mac , 常用快捷键
    Songs
    [Android学习笔记]扩展application
    [Android学习笔记]Context简单理解
    Activity组件的生命周期
    [数据结构和算法]快速排序笔记
    关于项目团队管理的几点思考
    【转】一步步教你读懂NET中IL(图文详解)
    【札记】设计的五个原则
    【转】高并发情况下的单例模式
  • 原文地址:https://www.cnblogs.com/fhuafeng/p/2371209.html
Copyright © 2011-2022 走看看