Abstract: A short discussion of how to generate and use query strings in JavaScript programs. Query strings are generated by forms or other programs.
As we noted, forms are traditionally used to provide information to programs. In general, the information from a form is passed along as a "query string" which appears after the URL. We can use forms and query strings to pass information between our JavaScript programs.
You can refer to the query string passed to your page (and therefore to
your program) as location.search. It may be empty, in
which case your page was loaded directly (instead of from a form), or
it may begin with a question mark, in which case your program was
probably loaded from a form.
I've created a sample page that prints out the query string.
A query string has the structure
?fld1=val1&fld2=val2&...&fldn=valn.
That is, it is a sequence of field/value pairs separated by ampersands. At times, it can be useful to work with the string as a whole (perhaps to test if it's empty, perhaps to test if a field name appears in the string).
If you look at the query string, you will note that many characters
appear in strange forms. For example, spaces are changed to plus signs,
and slashes (and question marks and ...) change to the form
%XX. Why? So that the server can correctly interpret
the URL (which includes the query string). For example, if slashes
appeared as slashes, the server might interpret them as part of the
directory structure.
Since it's a problem to deal with all the fields at once, and to
deal with this odd encoding (which you can eliminate by calling
unescape(...) on the string, I suggest using a utility function
to extract the value of particular
fields from the query string. I've written a few utilities to help you
do this. The primary function you will use is
queryField(fieldName), which returns the value
corresponding to the field name you give.
The easiest way to generate a query string for a program is with
a form. In the <FORM> tag, you must specify
method="get" and action="your-page".
Note that once you've written a HTML+JavaScript program that can interpret query strings, it is possible to generate the query
strings without using forms. For example, if I had a page,
makemad.html, that
expected a name (name1) and adjective (adj1
<a href="makemad.html?name1=Sam+Rebelsky&adj1=blue">.
You can visit a very simple implementation of this concept.
To help support use of query strings, I've created a small library of functions for handling the
query string. Right now, all it provides is
queryField(fieldname) which extracts one field from the
query. I don't guarantee that the library is
bug-free!.
The madlibs example above uses the library.
There are an enormous number of uses of query strings. You can certainly use them to provide custom pages (e.g., ask for information on a form and then load your page). You can even write one page that both provides the form and interprets it.
Query strings also provide a mechanism for carrying information from page to page. As long as you keep the query (or an updated version) on each page, you can maintain any state information you'd like. For example, one might use the following function when they need links so as to guarantee that the query is passed from page to page.
// Function // linkWithQuery(url,txt) // Description // Generates code for a link that preserves the query of the // current document. function linkWithQuery(url,txt) { return "<a href=\"" + url + location.search + "\">" + txt + "</a>" } // linkWithQuery