js+jquery获取网址get参数教程

心已赠人 2024-03-16 12:36 13阅读 0赞

### 思路 ###

[前端开发][Link 1]没有像后端那样直接获取网址参数的方法，如$\_GET这样的方法。

前端获取url参数比较复杂，需要用到js+[正则表达式][Link 1]，去读取、分隔网址来达到获取参数的方法。

### 获取网址参数方法 ###

这是一个完整的js获取url参数的方法

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> </td> 
   <td> <p><code>&nbsp;&nbsp;&nbsp;</code><code>//获取url中的参数</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>function</code>&nbsp;<code>getUrlParam(name)&nbsp;{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>reg&nbsp;=&nbsp;</code><code>new</code>&nbsp;<code>RegExp(</code><code>"(^|&amp;)"</code>&nbsp;<code>+&nbsp;name&nbsp;+&nbsp;</code><code>"=([^&amp;]*)(&amp;|$)"</code><code>);&nbsp;</code><code>//构造一个含有目标参数的正则表达式对象</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>r&nbsp;=&nbsp;window.location.search.substr(1).match(reg);&nbsp;&nbsp;</code><code>//匹配目标参数</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code>&nbsp;<code>(r&nbsp;!=&nbsp;</code><code>null</code><code>)&nbsp;</code><code>return</code>&nbsp;<code>unescape(r[2]);&nbsp;</code><code>return</code>&nbsp;<code>null</code><code>;&nbsp;</code><code>//返回参数值</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

通过这个函数传递url中的参数名就可以获取到参数的值，比如：

我们要获取reurl的值，可以这样写：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>var&nbsp;url&nbsp;=&nbsp;getUrlParam('url');</code></p> </td> 
  </tr> 
 </tbody> 
</table>

下面是一段以jquery库编写的获取url参数的方法，比原生JS要简单明了点。

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> </td> 
   <td> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>(</code><code>function</code>&nbsp;<code>($)&nbsp;{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$.getUrlParam&nbsp;=&nbsp;</code><code>function</code>&nbsp;<code>(name)&nbsp;{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>reg&nbsp;=&nbsp;</code><code>new</code>&nbsp;<code>RegExp(</code><code>"(^|&amp;)"</code>&nbsp;<code>+&nbsp;name&nbsp;+&nbsp;</code><code>"=([^&amp;]*)(&amp;|$)"</code><code>);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>r&nbsp;=&nbsp;window.location.search.substr(1).match(reg);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code>&nbsp;<code>(r&nbsp;!=&nbsp;</code><code>null</code><code>)&nbsp;</code><code>return</code>&nbsp;<code>unescape(r[2]);&nbsp;</code><code>return</code>&nbsp;<code>null</code><code>;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>})(jQuery);</code></p> </td> 
  </tr> 
 </tbody> 
</table>

为jquery扩展了这个方法了之后我们就可以通过如下方法来获取某个参数的值了：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>var</code>&nbsp;<code>url&nbsp;=&nbsp;getUrlParam(</code><code>'url'</code><code>);</code></p> </td> 
  </tr> 
 </tbody> 
</table>

两种方法都可以直接复制使用，[jquery方法][Link 1]需要引用jquery库。

[Link 1]: http://www.che0.com