A simple example of using jquery to obtain url and url parameters

  • 2021-06-28 10:42:37
  • OfStack

Obtaining url using jquery and url parameters using jquery are operations we often use

1. jquery is easy to get url, the code is as follows:


window.location.href;

Actually, only the window object which is the basis of javascript is used, not the knowledge of jquery.

2. jquery obtaining url parameter is very complex and regular expression is needed, so it is important to learn javascript regularity well.

First, let's see how a parameter in url can be obtained simply by using javascript:


// Obtain url Parameters in 
    function getUrlParam(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // structure 1 Regular expression objects with target parameters 
      var r = window.location.search.substr(1).match(reg); // Match target parameters 
      if (r != null) return unescape(r[2]); return null; // Return parameter value 
    }

By passing the parameter name from url through this function, you can get the value of the parameter, for example, if url is

http://localhost:33064/WebForm2.aspx?reurl=WebForm1.aspx

To get the value of reurl, you can write as follows:


var xx = getUrlParam('reurl');

Understanding how javascript obtains the url parameter, we can extend one method for jquery to obtain the url parameter from jquery. The code below extends one getUrlParam() method for jquery


(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);

After extending this method for jquery, we can get the value of a parameter as follows:


var xx = $.getUrlParam('reurl');

Full code:


<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {

      // Method 2 : 
      (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);

      // Method 2 : 
      var xx = $.getUrlParam('reurl');

      // Method 1 : 
      // var xx = getUrlParam('reurl');


      alert(xx);

    });

    // Method 1 : 
    // Obtain url Parameters in 
    function getUrlParam(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // structure 1 Regular expression objects with target parameters 
      var r = window.location.search.substr(1).match(reg); // Match target parameters 
      if (r != null) return unescape(r[2]); return null; // Return parameter value 
    }


 </script>

2014-4-23 Modification

Today, when using the above method to get the parameters in url, the Chinese parameters passed in url are garbled no matter how they are tested in parsing.After debugging, it is found that when I pass parameters again, I use encodeURI for Chinese character encoding, while the above method uses unescape for parsing parameter encoding, so it is OK to change to decodeURI.

Attachment: Introduction in W3School:

JavaScript unescape() function

Definition and Usage

The unescape() function decodes strings encoded by escape().

参数 描述
string 必需。要解码或反转义的字符串。

Explain

The function works by finding a sequence of characters in the form of%xx and%uxxxx (x represents a 106-digit number) and decoding it by replacing such sequences with the Unicode characters \u00xx and \uxxxx.

Tips and Notes

Note: ECMAScript v3 has removed the unescape() function from the standard and opposes its use, so decodeURI() and

decodeURIComponent() instead.

To sum up: javascript has a consistent encoding and decoding method for parameters:

escape() unescape()

encodeURI() decodeURI()

encodeURIComponent() decodeURIComponent()

Another javascript method found on the Web to obtain parameters in url:


<script language="JavaScript" type="text/javascript"> 

function GetUrlParms()  

{

  var args=new Object();  

  var query=location.search.substring(1);// Get Query String   

  var pairs=query.split("&");// Disconnect at Comma   

  for(var  i=0;i<pairs.length;i++)  

  {  

    var pos=pairs[i].indexOf('=');// lookup name=value  

      if(pos==-1)  continue;// Skip if not found   

      var argname=pairs[i].substring(0,pos);// extract name  

      var value=pairs[i].substring(pos+1);// extract value  

      args[argname]=unescape(value);// Save as Attribute   

  }

  return args;

}

var args = new Object();



args = GetUrlParms();

// If you are looking for parameters key:

if(args["id"]!=undefined)

{

// If you are looking for parameters key:

var value1 = args["id"] ;

alert(value1);

}</script>

Related articles: