Jquery obtains url parameters and url-based parameters. jqueryurl

Source: Internet
Author: User

Jquery obtains url parameters and url-based parameters. jqueryurl

Getting URLs using jquery and getting url parameters using jquery are common operations. The following describes how to add code analysis. For details, see the following.

1. jquery is easy to get the url. The Code is as follows:

Copy codeThe Code is as follows:
Window. location. href;

In fact, it only uses the basic window object of javascript and does not use jquery knowledge.

2. It is complicated for jquery to obtain url parameters. Regular Expressions are needed, so it is important to learn javascript Regular Expressions well.

First, let's take a look at how javascript is used to obtain a parameter in the url:

// Obtain the Parameter function getUrlParam (name) {var reg = new RegExp ("(^ | &)" + name + "= ([^ &] *) in the url. (& | $) "); // construct a regular expression object var r = window containing the target parameter. location. search. substr (1 ). match (reg); // match the target parameter if (r! = Null) return unescape (r [2]); return null; // return parameter value}

Pass the parameter name in the url through this function to get the parameter value. For example, if the url is

Http: // localhost: 33064/WebForm2.aspx? Reurl = WebForm1.aspx

To obtain the reurl value, you can write it as follows:

Copy codeThe Code is as follows:
Var xx = getUrlParam ('reurl ');

After understanding how javascript gets url parameters, we can use this method to expand a method for jquery to get url parameters through jquery. The following Code expands 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 this method is extended for jquery, we can use the following method to obtain the value of a parameter:

Copy codeThe Code is as follows:
Var xx = $. getUrlParam ('reurl ');

Complete 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 the Parameter function getUrlParam (name) {var reg = new RegExp ("(^ | &)" + name + "= ([^ &] *) in the url. (& | $) "); // construct a regular expression object var r = window containing the target parameter. location. search. substr (1 ). match (reg); // match the target parameter if (r! = Null) return unescape (r [2]); return null; // return parameter value} </script>

Modification

When we use the above method to obtain url parameters today, the Chinese parameters passed in the url are garbled no matter how tested during parsing. After some debugging, I found that when I passed the parameter again, I used encodeURI for Chinese character encoding, and the above method used unescape for parameter encoding, modify it to decodeURI.

Appendix: W3School introduction:

JavaScript unescape () function

The unescape () function can decode strings encoded by escape.

Parameters Description
String Required. The string to be decoded or reversed.

Description

This function works like this: Find the character sequence in the form of % xx and % uxxxx (x indicates a hexadecimal number ), use Unicode characters \ u00xx and \ uxxxx to replace such character sequences for decoding.

Tips and comments

Note: ECMAScript v3 has removed the unescape () function from the standard and is opposed to using it. Therefore, use decodeURI () and decodeURIComponent () instead.

To sum up, javascript should be consistent with the parameter encoding and decoding methods:

Escape () unescape ()

EncodeURI () decodeURI ()

EncodeURIComponent () decodeURIComponent ()

Another method for obtaining url parameters using javascript found on the Internet:

<Script language = "JavaScript" type = "text/javascript"> function GetUrlParms () {var args = new Object (); var query = location. search. substring (1); // obtain the query string var pairs = query. split ("&"); // disconnect for (var I = 0; I <pairs. length; I ++) {var pos = pairs [I]. indexOf ('='); // find name = value if (pos =-1) continue; // skip var argname = pairs [I] if no value is found. substring (0, pos); // extract name var value = pairs [I]. substring (pos + 1); // extract value args [argnam E] = unescape (value); // save as attribute} return args;} var args = new Object (); args = GetUrlParms (); // if you want to find the parameter key: if (args ["id"]! = Undefined) {// if you want to find the parameter key: var value1 = args ["id"]; alert (value1) ;}</script>

Jquery takes url parameters and adds parameters to the url

(function ($) { $.extend({  Request: function (m) {   var sValue = location.search.match(new RegExp("[\?\&]" + m + "=([^\&]*)(\&?)", "i"));   return sValue ? sValue[1] : sValue;  },  UrlUpdateParams: function (url, name, value) {   var r = url;   if (r != null && r != 'undefined' && r != "") {    value = encodeURIComponent(value);    var reg = new RegExp("(^|)" + name + "=([^&]*)(|$)");    var tmp = name + "=" + value;    if (url.match(reg) != null) {     r = url.replace(eval(reg), tmp);    }    else {     if (url.match("[\?]")) {      r = url + "&" + tmp;     } else {      r = url + "?" + tmp;     }    }   }   return r;  } });})(jQuery);

Usage

Dev.zhang.com/IOF.Signup/index_uscn_chs.html? Act = 1

1. Use the value

$. Request ("act") = 1

2. url and Parameters

$. UrlUpdateParams (window. location. href, "mid", 11111 ),

Result window. location. href? Medium = 11111

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.