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 相关文章推荐
JavaScript中数组对象的那些自带方法介绍
Mar 12 Javascript
js下拉菜单语言选项简单实现
Sep 23 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
jquery操作select方法汇总
Feb 05 Javascript
jquery控制页面部分刷新的方法
Jun 24 Javascript
JS验证邮件地址格式方法小结
Dec 01 Javascript
JavaScript实现的MD5算法完整实例
Feb 02 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
Feb 26 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 Javascript
iconfont的三种使用方式详解
Aug 05 Javascript
对于防止按钮重复点击的尝试详解
Apr 22 Javascript
vue双向绑定数据限制长度的方法
Nov 04 Javascript
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
orm获取关联表里的属性值
2016/04/17 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
asp.net和php的区别点总结
2019/10/10 PHP
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
JavaScript实现将UPC转换成ISBN的方法
2015/05/26 Javascript
跟我学习javascript的严格模式
2015/11/16 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
手机端转换rem适应
2017/04/01 Javascript
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
2018/01/08 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
Element MessageBox弹框的具体使用
2020/07/27 Javascript
Vue实现简易购物车页面
2020/12/30 Vue.js
Python中多线程的创建及基本调用方法
2016/07/08 Python
python中requests库session对象的妙用详解
2017/10/30 Python
详解Python在七牛云平台的应用(一)
2017/12/05 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
python面向对象 反射原理解析
2019/08/12 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
大学毕业生自荐书怎么写?
2014/01/06 职场文书
法人委托书范本
2014/09/15 职场文书
公安领导班子四风问题个人整改措施思想汇报
2014/10/09 职场文书
员工辞职信范文大全
2015/05/12 职场文书
2015年个人实习工作总结
2015/05/28 职场文书
初中毕业感言300字
2015/07/31 职场文书
七年级作文之下雨天
2019/12/23 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
golang定时器
2022/04/14 Golang
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python