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 相关文章推荐
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
Oct 21 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
第十篇BootStrap轮播插件使用详解
Jun 21 Javascript
AngularJS使用ng-repeat指令实现下拉框
Aug 23 Javascript
那些精彩的JavaScript代码片段
Jan 12 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
Ionic3 UI组件之Gallery Modal详解
Jun 07 Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
Sep 28 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
Sep 11 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
关于时间计算的结总
2006/12/06 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
tagName的使用,留一笔
2006/06/26 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
2013/10/14 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
jQuery中的一些小技巧
2017/01/18 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
Vue响应式添加、修改数组和对象的值
2017/03/20 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
微信小程序实现刷脸登录
2018/05/25 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
JS常用排序方法实例代码解析
2020/03/03 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
Python import用法以及与from...import的区别
2015/05/28 Python
深入理解Python中的super()方法
2017/11/20 Python
Python代码块批量添加Tab缩进的方法
2018/06/25 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
python中spy++的使用超详细教程
2021/01/29 Python
双立人加拿大官网:Zwilling加拿大
2020/08/10 全球购物
市场开发与营销专业求职信
2013/12/31 职场文书
小学五年级学生评语
2014/04/22 职场文书
孕妇离婚协议书范本
2014/11/20 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript
idea下配置tomcat避坑详解
2022/04/12 Servers
详解Android中的TimePickerView(时间选择器)的用法
2022/04/30 Java/Android
新的CSS 伪类函数 :is() 和 :where()示例详解
2022/08/05 HTML / CSS