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 相关文章推荐
在IE模态窗口中自由查看HTML源码的方法
Mar 08 Javascript
定义select的边框颜色
Apr 28 Javascript
基于JQuery的列表拖动排序实现代码
Oct 01 Javascript
JS循环遍历JSON数据的方法
Jul 08 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
Bootstrap轮播图的使用和理解4
Dec 14 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
Aug 01 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
Nov 29 Javascript
iview的table组件自带的过滤器实现
Jul 12 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
在Vue 中获取下拉框的文本及选项值操作
Aug 13 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的字符串用法小结
2010/06/08 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
Redis在Laravel项目中的应用实例详解
2017/08/11 PHP
Laravel框架实现model层的增删改查(CURD)操作示例
2018/05/12 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
PHP7 参数处理机制修改
2021/03/09 PHP
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
javascript showModalDialog模态对话框使用说明
2009/12/31 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
2013/06/29 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
聊聊Vue.js的template编译的问题
2017/10/09 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
2019/12/20 jQuery
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中if elif else及缩进的使用简述
2018/05/31 Python
Python3实现的简单工资管理系统示例
2019/03/12 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
手把手教你安装Windows版本的Tensorflow
2020/03/26 Python
python中entry用法讲解
2020/12/04 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
阿里巴巴Oracle DBA笔试题答案-备份恢复类
2013/11/20 面试题
如何用Java实现列出某个目录下的所有子目录
2015/07/20 面试题
请介绍一下WSDL的文档结构
2013/03/17 面试题
公司财务总监岗位职责
2013/12/14 职场文书
电子商务专业求职信范文
2015/03/19 职场文书
2019财务毕业实习报告
2019/06/27 职场文书
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android
php png失真的原因及解决办法
2021/11/17 PHP
详解pytorch创建tensor函数
2022/03/22 Python