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 相关文章推荐
SUN的《AJAX与J2EE》全文译了
Feb 23 Javascript
jquery垂直公告滚动实现代码
Dec 08 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
jQuery展示表格点击变色、全选、删除
Jan 05 Javascript
JS实现图片放大缩小的方法
Feb 15 Javascript
在node中使用jwt签发与验证token的方法
Apr 03 Javascript
用node.js写一个jenkins发版脚本
May 21 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 27 Javascript
p5.js绘制创意自画像
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
深入file_get_contents与curl函数的详解
2013/06/25 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
js实现通用的微信分享组件示例
2014/03/10 Javascript
jQuery搜索子元素的方法
2015/02/10 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
Bootstrap每天必学之附加导航(Affix)插件
2016/04/25 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
JQuery判断正整数整理小结
2017/08/21 jQuery
vue中路由验证和相应拦截的使用详解
2017/12/13 Javascript
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
angular 数据绑定之[]和{{}}的区别
2018/09/25 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
2018/12/03 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
Python访问MySQL封装的常用类实例
2014/11/11 Python
python SQLAlchemy 中的Engine详解
2019/07/04 Python
python 穷举指定长度的密码例子
2020/04/02 Python
英国最大的香水商店:The Fragrance Shop
2018/07/06 全球购物
Spartoo瑞典:鞋子、包包和衣服
2018/09/15 全球购物
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
全球工业:Global Industrial
2020/02/01 全球购物
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
仓库门卫岗位职责
2013/12/22 职场文书
料理师求职信
2014/01/30 职场文书
《守株待兔》教学反思
2014/03/01 职场文书
2014年公务员思想汇报范文:全心全意为人民服务
2014/03/06 职场文书
初三学生个人自我评定
2014/04/06 职场文书
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
写给女朋友的保证书
2015/05/09 职场文书
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js