Javascript获取HTML静态页面参数传递值示例


Posted in Javascript onAugust 18, 2013

给大家看一下我的代码 只要把这些代码嵌入到页面文件即可

例一
利用正则表达式来获取

var LocString = String(window.document.location.href); 
function getQueryStr(str) { 
var rs = new RegExp("(^|)" + str + "=([^&]*)(&|$)", "gi").exec(LocString), tmp; 
if (tmp = rs) { 
return tmp[2]; 
} 
// parameter cannot be found 
return ""; 
}

调用方法
document.getElementById("user").value = getQueryStr("user"); 
document.getElementById("password").value = getQueryStr("password"); 
document.getElementById("sysno").value = getQueryStr("sysno");

例二
利用split函数来按参数切成数组
<script> 
urlinfo=window.location.href; //获取当前页面的url 
len=urlinfo.length;//获取url的长度 
offset=urlinfo.indexOf("?");//设置参数字符串开始的位置 
newsidinfo=urlinfo.substr(offset,len)//取出参数字符串 这里会获得类似“id=1”这样的字符串 
newsids=newsidinfo.split("=");//对获得的参数字符串按照“=”进行分割 
newsid=newsids[1];//得到参数值 
alert("您要传递的参数值是"+newsid); 
</script>

不过一定要记得 这个方法只是针对含有参数的url有用 ,如果对方用了POST方法传递参数, url中是不会含有参数的所以这个技巧只对GET方法或者指定了参数的url有用哦

下面看一个完整的实例

aa.htm是参数输渗入渗出界面
bb.htm是参数接收处理界面
aa.htm

 <html> 
<head> 

</head> 

<body> 

<script> 

function submit() 

{ 

var input1 = document.getElementById("inputid"); 

window.open("bb.htm?inputStr=" + input1.value);//传入参数 

} 

</script> 

<input type = "text" id = "inputid"> 

<input type = "button" onclick = "submit()" value = "提交"> 

</body> 

</html> 

bb.htm: 

<html> 

<head> 

<script> 

//获得参数的方法 

var request = 

{ 

QueryString : function(val) 

{ 

var uri = window.location.search; 

var re = new RegExp("" +val+ "=([^&?]*)", "ig"); 

return ((uri.match(re))?(uri.match(re)[0].substr(val.leng th+1)):null); 

} 

} 

</script> 

</head> 

<body> 

<script> 

//调用方法获得参数 

var rt = request.QueryString("inputStr"); 

alert(rt); 

</script> 

</body> 

</html>

bb.htm
<html> 
<head> 

<title>test</title> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 

<SCRIPT LANGUAGE="JavaScript"> 

<!-- 

var request = { 

QueryString : function(val) { 

var uri = window.location.search; 

var re = new RegExp("" +val+ "=([^&?]*)", "ig"); 

return ((uri.match(re))?(uri.match(re)[0].substr(val.leng th+1)):null); 

} 

} 

var a = request.QueryString ("a"); 

var b = request.QueryString ("b"); 

var c = request.QueryString ("c"); 

if ((a != null)){a=a} else{a="参数A空"} 

if ((b != null)){b=b} else{b="参数B空"} 

if ((c != null)){c=c} else{c="参数C空"} 

document.writeln("参数A: " + a); 

document.writeln("<br>参数B: " + b); 

document.writeln("<br>参数C: " + c); 

//--> 

</SCRIPT> 

</head> 

<body> 

<form name="form1" action="?"> 

请输入参数值:<br> 

<SCRIPT LANGUAGE="JavaScript"> 

document.writeln("A:<input type='text' name='a' value='"+a+"'><br>"); 

document.writeln("B:<input type='text' name='b' value='"+b+"'><br>"); 

document.writeln("C:<input type='text' name='c' value='"+c+"'><br>"); 

</SCRIPT> 

<input type="submit" name="Submit" value="提交参数查观效果"> 

</form> 

</body> 

</html>
Javascript 相关文章推荐
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
Mar 16 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 Javascript
Bootstrap如何激活导航状态
Mar 22 Javascript
实例分析js事件循环机制
Dec 13 Javascript
详解创建自定义的Angular Schematics
Jun 06 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
Aug 02 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
Sep 27 Javascript
vue实现设置载入动画和初始化页面动画效果
Oct 28 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
Nov 16 Javascript
javascript实现拖拽碰撞检测
Mar 12 Javascript
向左滚动文字 js代码效果
Aug 17 #Javascript
热点新闻滚动特效的js代码
Aug 17 #Javascript
js 获取radio按钮值的实例
Aug 17 #Javascript
js 文本滚动效果的实例代码
Aug 17 #Javascript
javascript用户注册提示效果的简单实例
Aug 17 #Javascript
JS返回上一页实例代码通过图片和按钮分别实现
Aug 16 #Javascript
判断js对象是否拥有某一个属性的js代码
Aug 16 #Javascript
You might like
解析PHP高效率写法(详解原因)
2013/06/20 PHP
preg_match_all使用心得分享
2014/01/31 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
CL vs ForZe BO5 第一场 2.13
2021/03/10 DOTA
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
javascript:void(0)使用探讨
2013/08/27 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
NodeJS创建最简单的HTTP服务器
2017/05/15 NodeJs
js+css实现红包雨效果
2018/07/12 Javascript
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
浅谈JS和jQuery的区别
2019/03/27 jQuery
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
使用Node.js实现base64和png文件相互转换的方法
2020/03/11 Javascript
将Django框架和遗留的Web应用集成的方法
2015/07/24 Python
通过Python 接口使用OpenCV的方法
2018/04/02 Python
浅谈python中get pass用法
2019/03/19 Python
python使用turtle绘制国际象棋棋盘
2019/05/23 Python
Python简单处理坐标排序问题示例
2019/07/11 Python
python几种常用功能实现代码实例
2019/12/25 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
畜牧兽医本科生个人的自我评价
2013/10/11 职场文书
自我评价是什么
2014/01/04 职场文书
军训考核自我鉴定
2014/02/13 职场文书
活动总结模板
2014/05/09 职场文书
试用期转正员工自我评价
2014/09/18 职场文书
责任书格式
2015/01/29 职场文书
2015年三八妇女节活动总结
2015/02/06 职场文书
答谢酒会主持词
2015/07/02 职场文书
Tomcat配置访问日志和线程数
2022/05/06 Servers
教你如何用cmd快速登录服务器
2022/06/10 Servers
el-table-column 内容不自动换行的解决方法
2022/08/14 Vue.js