zoukankan      html  css  js  c++  java
  • javascript静态页面传值的三种方法分享

    一:JavaScript静态页面值传递之URL篇
    能过URL进行传值.把要传递的信息接在URL上.
    Post.htm

    复制代码 代码如下:

    <input type="text" name="username">
    <input type="text" name="sex">
    <input type="button" value="Post">
    <script language="javascript" >
    function Post()
    {
    //单个值 Read.htm?username=baobao;
    //多全值 Read.htm?username=baobao&sex=male;
      url = "Read.htm?username="+escape(document.all.username.value);
    url += "&sex=" + escape(document.all.sex.value);
    location.href=url;
    }
    </script>


    Read.htm

    复制代码 代码如下:

    <script language="javascript" >
    /*
    *--------------- Read.htm -----------------
    * Request[key]
    * 功能:实现ASP的取得URL字符串,Request("AAA")
    * 参数:key,字符串.
    * 实例:alert(Request["AAA"])
    *--------------- Request.htm -----------------
    */
    var url=location.search;
    var Request = new Object();
    if(url.indexOf("?")!=-1)
    {
    var str = url.substr(1) //去掉?号
      strs = str.split("&");
    for(var i=0;i<strs.length;i++)
    {
       Request[strs[i ].split("=")[0]]=unescape(strs[ i].split("=")[1]);
    }
    }
    alert(Request["username"])
    alert(Request["sex"])
    </script><script language="JavaScript">
    <!--
    function Request(strName)
    {
    var strHref = "www.jb51.net/index.htm?a=1&b=1&c=测试测试";
    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 "";
    }
    alert(Request("a"));
    alert(Request("b"));
    alert(Request("c"));
    //-->
    </script>
    <script>
    String.prototype.getQuery = function(name)
    {
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    var r = this.substr(this.indexOf("?")+1).match(reg);
    if (r!=null) return unescape(r[2]); return null;
    }
    var str ="www.jb51.net/index.htm?a=1&b=1&c=测试测试";
    alert(str.getQuery("a"));
    alert(str.getQuery("b"));
    alert(str.getQuery("c"));
    </script>

    优点:取值方便.可以跨域.
    缺点:值长度有限制

    二:JavaScript静态页面值传递之Cookie篇
    Cookie是浏览器存储少量命名数据.
    它与某个特定的网页或网站关联在一起.
    Cookie用来给浏览器提供内存,
    以便脚本和服务器程序可以在一个页面中使用另一个页面的输入数据.
    Post.htm

    复制代码 代码如下:

    <input type="text" name="txt1">
    <input type="button" value="Post">
    <script language="javascript" >
    function setCookie(name,value)
    {
    /*
    *--------------- setCookie(name,value) -----------------
    * setCookie(name,value)
    * 功能:设置得变量name的值
    * 参数:name,字符串;value,字符串.
    * 实例:setCookie('username','baobao')
    *--------------- setCookie(name,value) -----------------
    */
    var Days = 30; //此 cookie 将被保存 30 天
      var exp = new Date();
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
    location.href = "Read.htm"; //接收页面.
    }
    </script>

    Read.htm

    复制代码 代码如下:

    <script language="javascript" >
    function getCookie(name)
    {
    /*
    *--------------- getCookie(name) -----------------
    * getCookie(name)
    * 功能:取得变量name的值
    * 参数:name,字符串.
    * 实例:alert(getCookie("baobao"));
    *--------------- getCookie(name) -----------------
    */
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
    if(arr !=null) return unescape(arr[2]); return null;
    }
    alert(getCookie("baobao"));
    </script>

    优点:可以在同源内的任意网页内访问.生命期可以设置.
    缺点:值长度有限制.

    三:JavaScript静态页面值传递之Window.open篇
    这两窗口之间存在着关系.父窗口parent.htm打开子窗口son.htm
    子窗口可以通过window.opener指向父窗口.这样可以访问父窗口的对象.
    Post.htm

    复制代码 代码如下:

    <input type=text name=maintext>
    <input type=button value="Open">
    Read.htm
    <script language="javascript" >
    //window.open打开的窗口.
    //利用opener指向父窗口.
    var parentText = window.opener.document.all.maintext.value;
    alert(parentText);
    </script>

    优点:取值方便.只要window.opener指向父窗口,就可以访问所有对象.不仅可以访问值,还可以访问父窗口的方法.值长度无限制.
    缺点:两窗口要存在着关系.就是利用window.open打开的窗口.不能跨域.

  • 相关阅读:
    Form表单提交数据的几种方式
    前端基础-HTML
    python入门函数详解
    Python作业编写
    Python入门数据类型详解
    Jquery选择器
    做外链接和有外链接区别
    三层架构
    drop,delete,truncate区别
    run()和star()区别
  • 原文地址:https://www.cnblogs.com/proxyz/p/5436783.html
Copyright © 2011-2022 走看看