Detailed explanation of jquery's method of obtaining url and url parameters

This time I will bring you a detailed explanation of the jquery method of obtaining url and url parameters. What are the precautions for jquery to obtain url and url parameters? The following is a practical case, let's take a look.

Using jquery to get the url and using jquery to get the url parameters are operations we often use

1. Getting the url with jquery is very simple, the code is as follows:

window.location.href;

In fact, it only uses the basic

window object of javascript, without any knowledge of jquery.

2. jquery is more complicated to obtain url parameters, and regular expressions are used, so it is important to learn javascript regular expressions well

First of all Take a look at how to get a certain parameter in the url simply through JavaScript:

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

You can get the value of the parameter by passing the parameter name in the url through this function, for example, the url is

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

We want to get the value of reurl, we can write like this:

var xx = getUrlParam('reurl');

Understand javascript To get the url parameters, we can use this method to extend a method for jquery to get the url parameters through jquery. The following code extends a 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 through the following method:

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

Full code:

2014-4-23 Modified

When I used the above method to obtain the parameters in the URL today, the Chinese parameters passed in the URL were all garbled no matter how I tested them during parsing. After some debugging, I found that when I passed parameters, I used encodeURI for Chinese character encoding, while the above method used unescape when parsing parameter encoding. Just change it to decodeURI.

Attachment: Introduction in W3School:

JavaScript unescape() function

Definition and usage## The #unescape() function decodes a string encoded by escape().

Parametersstring

Description
Required. The string to decode or unescape.

Explanation

The function works like this: by finding the character sequence of the form %xx and %uxxxx ( x represents a hexadecimal number), replacing such character sequences with the Unicode characters \u00xx and \uxxxx for decoding.

Tips and Notes

Note: ECMAScript v3 has removed the unescape() function from the standard and deprecated its use, so decodeURI() should be used and

decodeURIComponent() instead.

To sum up: JavaScript must have the same encoding and decoding methods for parameters:

escape() unescape()

encodeURI() decodeURI()

encodeURIComponent() decodeURIComponent()

Another javascript method found online to obtain parameters in the url:

<script language="JavaScript" type="text/javascript"> 
function GetUrlParms()  
{
  var args=new Object();  
  var query=location.search.substring(1);//获取查询串  
  var pairs=query.split("&");//在逗号处断开  
  for(var  i=0;i<pairs.length;i++)  
  {  
    var pos=pairs[i].indexOf('=');//查找name=value  
      if(pos==-1)  continue;//如果没有找到就跳过  
      var argname=pairs[i].substring(0,pos);//提取name  
      var value=pairs[i].substring(pos+1);//提取value  
      args[argname]=unescape(value);//存为属性  
  }
  return args;
}
var args = new Object();
args = GetUrlParms();
//如果要查找参数key:
if(args["id"]!=undefined)
{
//如果要查找参数key:
var value1 = args["id"] ;
alert(value1);
}</script>

I believe you have mastered the method after reading the case in this article, more Please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to deal with page anchor failure in iframe

Detailed explanation of the steps to obtain the document object in iframe

The above is the detailed content of Detailed explanation of jquery's method of obtaining url and url parameters. For more information, please follow other related articles on the PHP Chinese website!