使用js获取地址栏参数的方法推荐(超级简单)

2024-09-28 08:28:25

方法一：采用正则表达式获取地址栏参数：（强烈推荐，既实用又方便！）

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;
} 

// 调用方法
alert(GetQueryString("参数名1"));
alert(GetQueryString("参数名2"));
alert(GetQueryString("参数名3"));

下面举一个例子:

若地址栏URL为：abc.html?id=123&url=http://www.jb51.net

那么，但你用上面的方法去调用：alert(GetQueryString("url"));

则会弹出一个对话框：内容就是 http://www.jb51.net

如果用：alert(GetQueryString("id"));那么弹出的内容就是 123 啦；

当然如果你没有传参数的话，比如你的地址是 abc.html 后面没有参数，那强行输出调用结果有的时候会报错：

所以我们要加一个判断，判断我们请求的参数是否为空，首先把值赋给一个变量：

var myurl=GetQueryString("url");
if(myurl !=null && myurl.toString().length>1)
{
  alert(GetQueryString("url"));
}

这样就不会报错了！

方法二：传统方法

<script type="text/javascript">
function UrlSearch()
{
  var name,value;
  var str=location.href; //取得整个地址栏
  var num=str.indexOf("?")
  str=str.substr(num+1); //取得所有参数  stringvar.substr(start [, length ]

  var arr=str.split("&"); //各个参数放到数组里
  for(var i=0;i < arr.length;i++){
  num=arr[i].indexOf("=");
  if(num>0){
   name=arr[i].substring(0,num);
   value=arr[i].substr(num+1);
   this[name]=value;
   }
  }
}
var Request=new UrlSearch(); //实例化
alert(Request.id);
</script>

比如说把这个代码存为1.html

那么我要访问1.html?id=test

这个时候就取到test的值了

在html里调用

<script type="text/javascript">
var a="http://baidu.com";
</script>
</head>
<body>
<a id="a1" href="">sadfsdfas</a>
<script>
var a1=document.getElementById("a1");
a1.href=a;
</script>

<script type="text/javascript">
var a="http://xxx.com/gg.htm?cctv";
var s=a.indexOf("?");
var t=a.substring(s+1);// t就是?后面的东西了 

</script>

stringvar.substr(start [, length ]

返回一个从指定位置开始的指定长度的子字符串。

stringvar

必选项。要提取子字符串的字符串文字或 String 对象。

start

必选项。所需的子字符串的起始位置。字符串中的第一个字符的索引为 0。

length

可选项。在返回的子字符串中应包括的字符个数。

如果 length 为 0 或负数，将返回一个空字符串。如果没有指定该参数，则子字符串将延续到 stringvar 的最后。

下面列举出一些相关的参数：

str.toLowerCase() 转换成小写
str.toUpperCase() 字符串全部转换成大写

URL即:统一资源定位符 (Uniform Resource Locator, URL)

完整的URL由这几个部分构成：

scheme://host:port/path?query#fragment

scheme:通信协议

常用的http,ftp,maito等

host:主机

服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。

port:端口号

整数，可选，省略时使用方案的默认端口，如http的默认端口为80。

path:路径

由零或多个"/"符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。

query:查询

可选，用于给动态网页（如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技术制作的网页）传递参数，可有多个参数，用"&"符号隔开，每个参数的名和值用"="符号隔开。

fragment:信息片断

字符串，用于指定网络资源中的片断。例如一个网页中有多个名词解释，可使用fragment直接定位到某一名词解释。(也称为锚点.)

对于这样一个URL

http://www.jb51.net/index.html?ver=1.0&id=6#imhere

我们可以用javascript获得其中的各个部分

1, window.location.href

整个URl字符串(在浏览器中就是完整的地址栏)
本例返回值: http://www.jb51.net/index.html?ver=1.0&id=6#imhere

2,window.location.protocol

URL 的协议部分
本例返回值:http:

3,window.location.host

URL 的主机部分
本例返回值:www.jb51.net

4,window.location.port

URL 的端口部分
如果采用默认的80端口(update:即使添加了:80)，那么返回值并不是默认的80而是空字符
本例返回值:""

5,window.location.pathname

URL 的路径部分(就是文件地址)
本例返回值:/fisker/post/0703/window.location.html

6,window.location.search

查询(参数)部分
除了给动态语言赋值以外，我们同样可以给静态页面,并使用javascript来获得相信应的参数值
本例返回值:?ver=1.0&id=6

7,window.location.hash

锚点
本例返回值:#imhere

以上这篇使用js获取地址栏参数的方法推荐(超级简单)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

JavaScript RegExp方法获取地址栏参数(面向对象)

复制代码代码如下: Request = { QueryString : function(item){ var svalue = location.search.match(new RegExp('[\?\&]' + item + '=([^\&]*)(\&?)','i')); return svalue ? svalue[1] : svalue; } } var key = Request.QueryString('key'); Request.QueryString是否跟AS
JS获取地址栏参数的小例子

复制代码代码如下: $(document).ready(function () { var locurl = location.href; var start = locurl.indexOf("?"); var end = locurl.length; var tempstr = locurl.substring(start + 1, end) var temp = tempstr.split("=&q
用javascript获取地址栏参数

方法一: <script type="text/javascript"> <!-- function Request(strName){ var strHref = "www.cnlei.org/index.htm?a=aaa&b=bbb&c=ccc"; var intPos = strHref.indexOf("?"); var strRight = strHref.substr(intPos +
JS获取地址栏参数的两种方法(简单实用)

js获取地址栏参数的方法有两种:第一种,采用正则表达式获取地址栏参数,第二种,是比较传统的方法,在这小编给大家强烈推荐使用第一种方法,既方便有实用,具体实现过程请看下文详述. 方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) function GetQueryString(name) { var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window
js 获取(接收)地址栏参数值的方法

当地址栏含有参数,我们可以再目标页面通过window.location.search来获取我们需要的参数及其值复制代码代码如下: // 获取地址栏的参数数组 function getUrlParams() { var search = window.location.search ; // 写入数据字典 var tmparray = search.substr(1,search.length).split("&"); var paramsArray = new Array;
js获取地址栏中传递的参数(两种方法)

第一种:字符串拆分法 window.location.href 或者 location.href 或者 window.location 获得地址栏中的所有内容 decodeURI()可以解码地址栏中的数据恢复中文数据 window.search 获得地址栏中问号及问号之后的数据 //获取地址栏里(URL)传递的参数 function GetRequest(value) { //url例子:www.bicycle.com?id="123456"&Name="bicyc
JS获取地址栏参数的几种方法小结

复制代码代码如下: <script> // 获取地址栏的参数数组 function getUrlParams() { var search = window.location.search; // 写入数据字典 var tmparray = search.substr(1, search.length).split("&"); var paramsArray = new Array; if (tmparray != null) { for (var
javascript/jquery获取地址栏url参数的方法

使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作 1.jquery获取url很简单,代码如下复制代码代码如下: window.location.href; 其实只是用到了javascript的基础的window对象,并没有用jquery的知识 2.jquery获取url参数比较复杂,要用到正则表达式,所以学好javascript正则式多么重要的事情首先看看单纯的通过javascript是如何来获取url中的某个参数复制代码代码如下: function
使用JavaScript获取地址栏参数的方法

复制代码代码如下: /** * 获取地址栏参数 * * @example GetUrlString('id') * * @desc 调用时加上判断,保证程序不会出错 * var myurl = GetUrlString('id'); * if (myurl != null && myurl.toString().length > 1) { * alert(GetUrlStrin
使用js获取地址栏参数的方法推荐(超级简单)

方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) 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; }
js获取地址栏参数的两种方法

项目中经常遇到获取上个页面跳转过来获取当前的参数 //获取地址栏参数,name:参数名称 function getUrlParms(name){ var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if(r!=null) return unescape(r[2]); return n
实例详解JavaScript获取链接参数的方法

使用url传递参数,大家应该不陌生,例如: http://www.softwhy.com/home.php?mod=space&do=home&view=all 既然传递参数,那么自然就要获得传递的参数,当然获取参数的方式有多种多样,下面就介绍其中的一种,和大家一起分享,希望能够给大家带来一定的帮助,代码如下: var url="http://www.softwhy.com/home.php?mod=space&do=home&view=all"; if
JS获取url参数、主域名的方法实例分析

本文实例讲述了JS获取url参数.主域名的方法.分享给大家供大家参考,具体如下: <script> alert(location.hostname) alert(location.port) alert(location.pathname) alert(location.search) </script> <script> function winsx(url) //URL传递的参数 { var winurl =url?url:(unescape(window.loca
JS获取url参数,JS发送json格式的POST请求方法

<script type="text/javascript"> 一.获取url所有参数值 function US() { var name, value; var str = location.href; var num = str.indexOf("?"); str = str.substr(num + 1); var arr = str.split("&"); for (var i = 0; i < arr.leng
前端JS获取URL参数的4种方法总结

目录前言方法1: 字符串 split 方法方法2: 利用 URLSearchParams 方法方法3: 利用正则匹配方法方法4: 使用第三方库 qs 总结: 前言对于前端来说,无论是在面试或者工作中都可能遇到处理 url 参数的问题,使用框架进行项目开发时或许不用,有自带的获取参数方式,但是抛开使用框架来说我们也可以使用原生 js 方式或者借用第三方库来实现参数的获取并对象化,下面就对具体用法进行介绍整理. 方法1: 字符串 split 方法因为一个 url 地址是字符串形式的,所

使用js获取地址栏参数的方法推荐(超级简单)

相关推荐

随机推荐