Html获取Url参数

做web前端的开发很多的时候都会遇到的一个很简答的问题,就是两个页面之间的跳转,一般来说是:

<a href = "www.baidu.con">测试</a>

这样的没有参数的一般是最简单的,可以跳转是因为<a>的href属性,但是一般在做项目的时候是不会只仅仅跳转的一般是带有一个或者是多个参数的,然后在下一个页面将参数传递过去,这个时候很多的方法都是可以取到的,今天说的是基于jQuery取参数(虽然很简单,但是照顾新手,还是举个例子来说吧)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.10.2.min.js" type="text/javascript"></script>
		<script src="../js/getUrl.js" type="text/javascript"></script>
	</head>
	<body>
		<a href="jieshouURL.html?name=123&id=1234">点击测试获取url参数</a>
	</body>
</html>

这是一个简单的H5页面,显示的效果是:

这个时候我们是写了两个参数的,name和id,这个时候我们写一段js:

/*获取到Url里面的参数*/
(function ($) {
  $.getUrlParam = function (name) {
   var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
   var r = window.location.search.substr(1).match(reg);
   if (r != null) return unescape(r[2]); return null;
  }
 })(jQuery);

然后我们将jieshouURL.html打开:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.10.2.min.js" type="text/javascript"></script>
		<script src="../js/getUrl.js" type="text/javascript"></script>
	</head>
	<script>
		var name = $.getUrlParam('name');
		var id = $.getUrlParam('id');

		window.onload = function(){
			$("#addname").val(name);
			$("#addid").val(id);
		}
	</script>

	<body>
		<label>测试URL中的name是:</label>
		<input type="text" id="addname" />
		<label>测试URL中的id是:</label>
		<input type="text" id="addid" />

	</body>

</html>

我们点击测试URL参数页面:

ok,总结一下就是:

将js封装起来作为一个工具,以后需要取值的时候可以直接用,直接调用里面的函数就是可以的:

$.getUrlParam('name');//name就是您参数里面的名字  然后将取出来的参数赋值给一个变量,就可以在当前页面获取到了

不要嫌我啰嗦,说那么简单的一个操作写的那么麻烦,因为我也是从很菜的时候过来的,我知道很多的时候我们认为很简单的操作对于一个新手来说根本看不懂,所以赘述有时候是对大家的照顾。

更新内容:使用这个方法直接获取中文的会出现乱码的问题,这是因为浏览器会将您的中文解析,我们需要改一下写法:

function GetQueryString(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			if(r != null) return decodeURI(r[2]);
			return null;
		}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 写个localStorage的小例子

    我在搜狗问问帮别人写代码的时候遇到一个小的问题,问题是这样的,就是题主希望在别的页面获取到前一个页面存在js里面的数据,这个时候一般都会想到的是用cookie,...

    何处锦绣不灰堆
  • bootstrap实现分页(实例)

    写前端都会面临的一个问题就是分页,如果是纯js分页也是可以的,只是可能代码量比较大,所以今天写一个关于用bootstrap框架分页的例子,希望以后可以帮助到一些...

    何处锦绣不灰堆
  • 用织梦实现一个从零到可以正常访问的网站--第二章

    首先我需要写一个例子,之前的例子被我玩坏了,再写一个完整的模板出来太耗费时间了,我直接写一个比较简单的页面,但是基本上网站都是这几块,我们先看一下运行的效果:

    何处锦绣不灰堆
  • JavaScript学习总结(二)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一、AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应...

    张果
  • jQueryGantt—集变态与惊艳于一身

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

    hotqin888
  • 谷歌开源缩放模型EfficientNets:ImageNet准确率创纪录,效率提高10倍

    最近,谷歌基于AutoML开发了EfficientNets,这是一种新的模型缩放方法。它在ImageNet测试中实现了84.1%的准确率,再次刷新了纪录。

    量子位
  • 跨域请求数据解决方案整理

    跨域请求数据解决方案主要有如下解决方法: JSONP方式 表单POST方式 服务器代理 Html5的XDomainRequest Flash request 分...

    小端
  • webpack4.0各个击破(1)—— html部分

    对于浏览器而言,html文件是用户访问的入口点,也是所有资源的挂载点,所有资源都是通过html中的标记来进行引用的。而在webpack的构建世界里,html只是...

    大史不说话
  • “无人店”热潮平息,“机器视觉+商业智能”以另类模式落地传统零售 | 活动

    走进一家便利店,随即响起提示音:“您好,会员,欢迎光临,今天XXX商品有打折哦。”

    镁客网
  • 第36天:倒计时:发动短信验证、跳转页面、关闭广告

    setTimeout("函数",时间) setInterval(fn,5000);//每隔5秒执行一次fn setTimeout(fn,5000);//5秒之后...

    半指温柔乐

扫码关注云+社区

领取腾讯云代金券