URL query string for page pass value

Source: Internet
Author: User

What is the page value, as the name implies, is to make a page jump, the page will be some of the values to go to the page to jump. There are several ways to pass a page value:

1. Use the QueryString query string. Passing values through the address bar's parameters

2. Use cookies. Save the value in a cookie, and then read the corresponding value from the cookie.

3. Use the session.

4. Use Server.Transfer.

5. Use Application.

6. Use the cache.

7. Use the HttpContext Item property.

8. Working with files

The above list is the method of the page value of ASP, commonly used is the first three kinds. And front-end developers, generally only the first two to carry out the value of the page. Today, just say the first, how to use the query string to pass the value, and after jumping to the specified page, how to get the value passed over.

First, how to carry out the page value

First of all, let's look at the format of the page value, take the address bar of the blog park as an example

The parameter followed by the question mark is the query string, which only takes the opt parameter. If you have more than one parameter, you can use "&" to separate it. such as "http://i.cnblogs.com/EditPosts.aspx?opt=1&id=2"

So how to append the value of the parameter to the URL, say not more:

In this example, click the OK button to jump to the Secondpage page and take the value of the parameter two input box as a parameter.

After the jump, the address bar is like this

In this way, the value is passed, is not fried chicken simple it.

Two. Get the value of the query string

After jumping to page 2nd, we need to get the query parameters after the address bar, which is the string of characters after the question mark. About getting the entire URL is not much to say, you can refer to this http://blog.unvs.cn/archives/jquery-local-url-param.html JS get the following method:

  function geturlparms ()    {        var args=new Object ();        var query=location.search.substring (1);//Get query string        var pairs=query.split ("&");//break at Comma for        (var   i=0;i <pairs.length;i++)        {            var pos=pairs[i].indexof (' = ');//Find Name=value            if (pos==-1)   continue;// If not found, skip            var argname=pairs[i].substring (0,pos);//extract name            var value=pairs[i].substring (pos+1);//Extract value            Args[argname]=unescape (value);//Save As Property        }        return args;    }

Here's how to use it:

function showurlparms () {    var arg=geturlparms ();     var id=arg["id"];     var name=arg["name"];    Alert ("ID:" +id + ", Name:" +name);}
View Code

Click the View button and we see that the value has been successfully obtained

So it's over, no, look at the following situation, when you are in Chinese, it becomes this:

This is because the unescape () function decodes the Chinese after it becomes garbled,ECMAScript v3 has removed the unescape () function from the standard, and opposes the use of it, so should use decodeURI () and decodeURIComponent () Instead.

  functiongeturlparms () {varargs=NewObject (); varQuery=location.search.substring (1);//Get query string        varPairs=query.split ("&");//Break at comma         for(vari=0;i<pairs.length;i++)        {            varPos=pairs[i].indexof (' = ');//Find Name=value            if(Pos==-1)Continue;//If you don't find it, skip it.            varArgname=pairs[i].substring (0,pos);//Extract Name            varValue=pairs[i].substring (pos+1);//Extract ValueArgs[argname]=decodeuricomponent (value);//Save As Property        }        returnargs; }
New View Code

JavaScript should be consistent with the parameter encoding and decoding methods:

Escape () unescape ()

encodeURI () decodeURI ()

encodeURIComponent () decodeuricomponent ()

This, is implemented with JS, below, we look at how to achieve with jquery.

(function ($) {                $.geturlparam = function (name) {                    var reg = new RegExp ("(^|&)" + name + "= ([^&]*) (&|$) ");                    var r = window.location.search.substr (1). Match (reg);                    if (r! = null) return decodeURIComponent (r[2]); return null;                }            }) (JQuery);

The jquery extension method is implemented here, so that the method call, of course, can also be written directly as a function call, as follows:

1<script type= "Text/javascript" >2$(function () {3             //Method Two:4(function ($) {5$.geturlparam =function(name) {6                     varReg =NewRegExp ("(^|&)" + name + "= ([^&]*) (&|$)");7                     varr = Window.location.search.substr (1). Match (reg);8                     if(r! =NULL)returndecodeURIComponent (r[2]);return NULL;9                 }Ten }) (jQuery); One  A             //Method Two: -             varxx = $.geturlparam (' Reurl '); -             //method One: the             //var xx = Geturlparam (' Reurl '); - alert (xx); -         }); -         //method One: +         //get the parameters in the URL -         functionGeturlparam (name) { +             varReg =NewRegExp ("(^|&)" + name + "= ([^&]*) (&|$)");//constructs a regular expression object that contains a target parameter A             varr = Window.location.search.substr (1). Match (REG);//Match target Parameters at             if(r! =NULL)returndecodeURIComponent (r[2]);return NULL;//Return parameter Values -         } -</script>
jquery Get URL

Because of the time, here is not explained in detail, the above code I also stole this man http://www.cnblogs.com/babycool/p/3169058.html, have not yet and test, we can try it yourself

URL query string for page pass value

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.