javascript静态页面传值的三种方法分享


Posted in Javascript onNovember 12, 2013

一: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 = "3water.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)
{
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 ="3water.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

<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打开的窗口.不能跨域.

Javascript 相关文章推荐
动态的创建一个元素createElement及删除一个元素
Jan 24 Javascript
javascript设计模式之解释器模式详解
Jun 05 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 Javascript
jquery实现textarea 高度自适应
Mar 11 Javascript
JavaScript分页功能的实现方法
Apr 25 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 Javascript
D3.js实现折线图的方法详解
Sep 21 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
详解Vue用axios发送post请求自动set cookie
May 10 Javascript
在小程序中使用canvas的方法示例
Sep 17 Javascript
Vue中父子组件的值传递与方法传递
Sep 28 Javascript
jquery实现拖拽小方块效果
Dec 10 jQuery
javascript的渐进增强与平稳退化浅谈
Nov 12 #Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 #Javascript
JavaScript中的字符串操作详解
Nov 12 #Javascript
JavaScript简单实现网页回到顶部功能
Nov 12 #Javascript
判定是否原生方法的JS代码
Nov 12 #Javascript
给文字加上着重号的JS代码
Nov 12 #Javascript
深入理解javascript动态插入技术
Nov 12 #Javascript
You might like
PHP网页游戏学习之Xnova(ogame)源码解读(五)
2014/06/23 PHP
windows7下安装php的imagick和imagemagick扩展教程
2014/07/04 PHP
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
php Session无效分析资料整理
2016/11/29 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
Javascript 圆角div的实现代码
2009/10/15 Javascript
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
常用一些Javascript判断函数
2012/08/14 Javascript
JS下拉框内容左右移动效果的具体实现
2013/07/10 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
python编程通过蒙特卡洛法计算定积分详解
2017/12/13 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
使用django自带的user做外键的方法
2020/11/30 Python
医药专业应届毕业生求职信范文
2014/01/01 职场文书
学期研究性学习个人的自我评价
2014/01/09 职场文书
计划生育证明格式范本
2014/09/12 职场文书
道歉情书大全
2015/05/12 职场文书
建筑工程催款函
2015/06/24 职场文书
新闻发布会新闻稿
2015/07/17 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP
Python爬虫基础之爬虫的分类知识总结
2021/05/13 Python
使用pipenv管理python虚拟环境的全过程
2021/09/25 Python