A "Query String" is part of a web page URL, containing data to be passed to the page. It follows the web address, and is separated from it by a single question mark. It can contain any number of parameters, which are separated by ampersands. A parameter name and its optional parameter value are separated by an equal sign. There are no quoting delimiters, so the parameter value cannot contain equal signs or ampersands.
Querystrings may be part of the href in a hyperlink, or may be generated by a web-based form. Typically, query strings are used by server-side applications, such as CGI or ASP programs, but they can also be interpreted and used by JavaScript programs that run in the web browser.
This page uses client-side JavaScript to interpret the query string. It utilizes an external JavaScript file called querystring.js to load the query string into an associative array called queryString. (An "associative array" is just an array that uses string subscripts.)
These hyperlinks all link back to this page, with different querystring parameters to illustrate how to handle special characters.
'boots&shoes' represents the value 'boots followed by the invalid parameter name shoes'.
The javascript file used by this page is a general-purpose parameter-reading function. Any HTML page that utilizes it can read any incoming querystring parameters, such as those supplied by a form. To use it
method="get", and
The JavaScript file will assure that, In your action page, the JavaScript array "queryString" will be loaded with all of the form data. You can then display the data, or use it in any way you wish. (Note that the queryString JavaScript file inserts code into "main line" of the page, rather than in a JavaScript function. The code is thus executed as the page is loaded, without any function call in the HTML file.)
To see this process in action, fill out this short form. You'll invoke this very page, so you can see your querystring parameters at the top of the page. Then scroll down to the pink box below to see how the values can be displayed.
Querystring.js contains only a few lines of code. Here it is:
/* querystring.js - Contains functions to extract querystring parameters from URL
The parameters are loaded into the associative array queryString[].
//In open JavaScript (not inside a function), define the array
var queryString = new Array();
// and then pull the querystyring parameters from the URL.
// The search property of the window location returns the query string.
// The method substring(1) removes the first character (the question mark).
// The split function then copies the parameters into an array called "parms"
var parameters = window.location.search.substring(1).split('&');
// For each element in the array, find the equal sign that separates the parameter
// name from the parameter value. If there is one, divide the expression into
// the parameter name
for (var i=0; i<parameters.length; i++) {
var pos = parameters[i].indexOf('=');
// If there is an equal sign, separate the parameter into the name and value,
// and store it into the queryString array.
if (pos > 0) {
var paramname = parameters[i].substring(0,pos);
var paramval = parameters[i].substring(pos+1);
queryString[paramname] = unescape(paramval.replace(/\+/g,' '));
} else {
//special value when there is a querystring parameter with no value
queryString[parameters[i]]=""
}
}
Then this web page displays the querystring parameters with this JavaScript loop, which displays all of the elements in the associative array:
Finally, the JavaScript code that displays the results of the form submission is: JavaScript code much like this would be used by any HTML form processing processing that uses querystring.js.
This table shows Hexadecimal and Decimal values for some standard characters. It is important to remember that URL-encoding uses Hex values and a percent sign, while HTML entities use decimal values and a pound sign to represent the same characters. Confusingly, HTML colors use a pound sign and Hex values!
|
|
|
|
|