js获取URL请求参数与改变src

最新推荐文章于 2022-09-29 15:59:14 发布

原创最新推荐文章于 2022-09-29 15:59:14 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #url

本文介绍如何使用原生JavaScript及jQuery从URL中获取指定参数，并根据该参数动态加载图片资源。首先通过正则表达式匹配URL参数，然后设置图片源。jQuery扩展方法提供了更简洁的API来实现相同功能。

js实现:

<script>
			function GetQueryString(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				var r = window.location.search.substr(1).match(reg);
				if(r != null) return unescape(r[2]);
				return null;
			}	
		    
			window.onload=function() {
				var img=document.getElementById("type");
			
				img.setAttribute("src","img/tiche/"+GetQueryString("carmodel")+".jpg");
			}
		
		</script>

<div style="margin-top:40px">
			<img src="" width="100%">
			<img src="" width="100%">
			<img id="type" src="" width="100%">
		</div>

Jquery实现：

<script src="js/jquery-1.11.1.min.js"></script>
		<script src="js/jquery.form.js"></script>
		<script>
			$.extend({
				getUrlVars: function() {
					var vars = [],hash;
					var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
					for(var i = 0; i < hashes.length; i++) {
						hash = hashes[i].split('=');
						vars.push(hash[0]);
						vars[hash[0]] = hash[1];
					}
					return vars;
				},
				getUrlVar: function(name) {
					return $.getUrlVars()[name];
				}
			});
		</script>

调用方法：

<script>
			//Get object of URL parametersvar 
			allVars = $.getUrlVars();
			// Getting URL var by its namvar 
			byName = $.getUrlVar('name');
		  </script>