JS页面间传值

原创 2012年03月07日 21:38:57

一: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)

{

  varstr = url.substr(1) //去掉?号

  strs= str.split("&");

  for(vari=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.abc.com/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)

{

  varreg = new RegExp("(^|&)"+ name+"=([^&]*)(&|$)");

  varr = this.substr(this.indexOf("?")+1).match(reg);

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

}

var str ="www.abc.com/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—>

 

<inputtype="text" name="txt1">

<inputtype="button" value="Post">

<scriptlanguage="javascript" >

functionsetCookie(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—>

 

<scriptlanguage="javascript" >

functiongetCookie(name)

{

/*

*---------------getCookie(name) -----------------

*getCookie(name)

* 功能:取得变量name的值

* 参数:name,字符串.

* 实例:alert(getCookie("baobao"));

*---------------getCookie(name) -----------------

*/

  var arr =document.cookie.match(new RegExp("(^|)"+name+"=([^;]*)(;|$)"));

  if(arr !=null) returnunescape(arr[2]); return null;

}

alert(getCookie("baobao"));

</script>

 

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

三:JavaScript静态页面值传递之Window.open篇

这两窗口之间存在着关系.父窗口parent.htm打开子窗口son.htm

子窗口可以通过window.opener指向父窗口.这样可以访问父窗口的对象.

 

 

<inputtype=text name=maintext>

<inputtype=button value="Open">

Read.htm

<scriptlanguage="javascript" >

//window.open打开的窗口.

//利用opener指向父窗口.

varparentText = window.opener.document.all.maintext.value;

alert(parentText);

</script>

 

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

两个页面之间通过js进行传值

第一个页面中有两个图片,当点击的时候能在第二个页面中获得它的属性值()通过js进行传值:第一个页面:[html] 第一个页面中有两个图片,当点击的时候能在第二个页面中获得它的属性...
  • baidu_31333625
  • baidu_31333625
  • 2016年11月15日 17:19
  • 3544

js搞定两个网页之间值的传递

假设我们有两个网页a.html和b.html,在a页面中点击一个超链接或者按钮跳转到b页面,并传递一个地址给b页面,b页面接收到地址后进行跳转到接收的地址 首先,在a页面中插入一个超链接 超链接...
  • baidu_25943379
  • baidu_25943379
  • 2016年03月28日 13:42
  • 2238

js 不同页面间传递值并取值

以前没用到过页面间传递参数再从后台获取数据,然后搜索了一下。 发现了一个比较好的方法: 1.先说需求:现在有页面pageA.html 和页面pageB.html,页面pageA.html中有一事件,当...
  • web_xyk
  • web_xyk
  • 2015年08月22日 09:51
  • 3814

js页面跳转并传值的常用方法

在前端开发中我们常常需要从一个跳到另一个页面,并且将当前页面的数据传递过去,我常用下面两种方法 1、在url路径后面带参数,参数与url之间用?隔开,参数与参数之间用&符隔开 window.l...
  • k491022087
  • k491022087
  • 2017年01月15日 20:55
  • 2916

前端在html页面之间传递参数的方法

项目中经常会出现的一种情况,有一个列表,譬如是案例列表,点击列表中的某一项,跳转至详情页面。详情是根据所点击的某条记录生成的,因为案例和具体的详情页面,都是用户后期自行添加的,我们开始编写时,不可能穷...
  • liuyan19891230
  • liuyan19891230
  • 2016年03月23日 11:04
  • 46192

JSP页面之间传值的方法总结

B/S页面间通信 HTTP是无状态的协议。Web页面本身无法向下一个页面传递信息,如果需要让下一个页面得知该页面中的值,除非通过服务器。因此,Web页面保持状态并传递给其它页面,是一个重要的技术。 W...
  • HLK_1135
  • HLK_1135
  • 2016年10月13日 21:03
  • 11287

跨页面传值的几种简单方式

方法一: 通过URL传值 eg: location.href="跨页面1-2.html?age=18&gender=man"; 在下个页面接收: //1、location.sea...
  • m0_37452696
  • m0_37452696
  • 2017年10月22日 15:16
  • 137

ASP.NET跨页面传值技巧总结

原文地址:ASP.NET页面传值 关于页面传值的方法,引发了很多讨论。看来有很多人关注这个,我就我个人观点做了些总结,希望对大家有所帮助。   1.  使用QueryString变量 ...
  • sinat_15155817
  • sinat_15155817
  • 2016年08月30日 14:38
  • 742

跨页面传值的5种对象

  • 2012年10月28日 21:06
  • 22KB
  • 下载

html 页面之间跳转和传值

从a.html 跳转到b.html 并吧 a.html 的值传入b.html a.html New Document function to (){...
  • caofeilong20941
  • caofeilong20941
  • 2013年06月05日 14:28
  • 56990
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS页面间传值
举报原因:
原因补充:

(最多只允许输入30个字)