Parsing the url querystring using jquery and inserting the value in a textbox?

问题

post.php?replyto=username&othervariable=value

For example, if I click a link with this url, then I want to take the replyto=username value and insert the value in a textbox using jquery.

function insertParamIntoField(url, param, field) { 
       var anchor = document.createElement('a'), query;
       anchor.value = url;
       query = anchor.query.split('&');

       for(var i = 0, kv; i < query.length; i++) {
          kv = query[i].split('=', 2);
          if (kv[0] == param) {
             field.value = kv[1];
             return;
          }
       }  
    }

    $("a .reply").click(function () {
       insertParamIntoField(this.href, "replyto", $("input .inputField")[0]);
       return false; // prevent default action
    });

this is my html code:

<textarea name="inputField" id="inputField" tabindex="1" rows="2" cols="40"></textarea>
<a class ="reply"  href="home.php?replyto=username">reply</a>

回答1:

function insertParamIntoField(url, param, field) { 
   var anchor = document.createElement('a'), query;
   anchor.href = url;
   query = anchor.search.substring(1, anchor.search.length).split('&');

   for(var i = 0, kv; i < query.length; i++) {
      kv = query[i].split('=', 2); console.log(kv);
      if (kv[0] == param) {
         field.value = kv[1];
         return;
      }
   }  
}

$("a.reply").click(function () {
   insertParamIntoField(this.href, "replyto", $("textarea.inputField")[0]);
   return false; // prevent default action
});

The insertParamIntoField function will work for any well formed URL (as a string). It works by creating a new anchor DOMElement (but never attaches it to the dom) for that URL and then by using the built in properties of anchor elements (query, hash, etc.) to extract what we want.

If the URL is from an anchor element, we can create a new version of this function that uses that existing anchor rather than creating a new one:

function insertParamIntoField(anchor, param, field) { 
   var query = anchor.search.substring(1, anchor.search.length).split('&'); // anchor is a DOMElement 

   for(var i = 0, kv; i < query.length; i++) {
      kv = query[i].split('=', 2);
      if (kv[0] == param) {
         field.value = kv[1];
         return;
      }
   }  
}

$("a.reply").click(function () {
   insertParamIntoField(this, "replyto", $("textarea.inputField")[0]);
   return false; // prevent default action
});

回答2:

Parsing the URL can be done with a simple function. Use this in your Javascript:

$.urlParam = function(name){
  var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
  return results[1] || 0;
}

You can then call:

$.urlParam('username');

and it will return the user name. So, to actually use it with your text box, do:

$('#textBoxId').val($.urlParam('username'));

回答3:

$('textarea').val("<?php echo $_GET['replyto']");

回答4:

Using the code from this SO answer (which is great btw) by Artem Barger to get any parameter by name from the query string you could do:

function getParameterByName( name ) 
{ 
    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); 
    var regexS = "[\\?&]"+name+"=([^&#]*)"; 
    var regex = new RegExp( regexS ); 
    var results = regex.exec( window.location.href ); 
    if(results == null ) 
        return ""; 
    else 
       return decodeURIComponent(results[1].replace(/\+/g, " ")); 
} 

Then just insert the value into the textbox:

$("#yourTextBox").val(getParameterByName('replyto')); 

回答5:

You should be able to grab the ?replyto=username&othervariable=value part with window.location.search, then you have to get the part you want

var print = '?replyto=username&othervariable=value'; // Would be window.location.search in practice
$('textBox').val(print.substr(print.indexOf('replyto=')+8,print.indexOf('&')-(print.indexOf('replyto=')+8)));

​

回答6:

Here is some Javascript that should help you. Just take the return value from the getQuerystringNameValue() function and use $("#textboxID").val(returnValue); to assign it to the textbox.

alert("name1" + " = " + getQuerystringNameValue("name1"));
alert("name2" + " = " + getQuerystringNameValue("name2"));
alert("name3" + " = " + getQuerystringNameValue("name3"));


function getQuerystringNameValue(name)
{
    // For example... passing a name parameter of "name1" will return a value of "100", etc.
    // page.htm?name1=100&name2=101&name3=102

    var winURL = window.location.href;
    var queryStringArray = winURL.split("?");
    var queryStringParamArray = queryStringArray[1].split("&");
    var nameValue = null;

    for ( var i=0; i<queryStringParamArray.length; i++ )
    {           
        queryStringNameValueArray = queryStringParamArray[i].split("=");

        if ( name == queryStringNameValueArray[0] )
        {
            nameValue = queryStringNameValueArray[1];
        }                       
    }

    return nameValue;
}

来源：https://stackoverflow.com/questions/3680060/parsing-the-url-querystring-using-jquery-and-inserting-the-value-in-a-textbox