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之ESC(第二类混淆)
May 06 Javascript
js 自定义的联动下拉框
Feb 07 Javascript
js控制web打印(局部打印)方法整理
May 29 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
May 23 Javascript
jquery动态切换背景图片的简单实现方法
May 14 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
jQuery实现拖动剪裁图片作为头像
Dec 28 Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 Javascript
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
vue 界面刷新数据被清除 localStorage的使用详解
Sep 16 Javascript
axios封装与传参示例详解
Oct 18 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
PHP实现自动识别Restful API的返回内容类型
2015/02/07 PHP
php限制文件下载速度的代码
2015/10/20 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
在TP5数据库中四个字段实现无限分类的示例
2019/10/18 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
js 利用className得到对象的实现代码
2011/11/15 Javascript
jQuery遍历Form示例代码
2013/09/03 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
jQuery自动完成插件completer附源码下载
2016/01/04 Javascript
javascript实现随机显示星星特效
2016/01/28 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
Python httplib模块使用实例
2015/04/11 Python
动态规划之矩阵连乘问题Python实现方法
2017/11/27 Python
python回调函数中使用多线程的方法
2017/12/25 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
Python之reload流程实例代码解析
2018/01/29 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
Python用Try语句捕获异常的实例方法
2019/06/26 Python
深入了解python中元类的相关知识
2019/08/29 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
python可视化 matplotlib画图使用colorbar工具自定义颜色
2020/12/07 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
JDO的含义
2012/11/17 面试题
个人简历自我鉴定
2013/10/11 职场文书
开业典礼主持词
2014/03/21 职场文书
二年级班级文化建设方案
2014/05/10 职场文书
法定代表人授权委托书
2014/09/19 职场文书
导游词之凤凰古城
2019/10/22 职场文书