Using Query Strings

Abstract: A short discussion of how to generate and use query strings in JavaScript programs. Query strings are generated by forms or other programs.

• Introduction
• Structure of query strings
• Generating Query Strings
• Some Applications of Query Strings

Introduction

As we noted earlier, 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.

Structure of query strings

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.

Generating Query Strings

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, story.html, that expected a name field and a color field, I could link to it with

<a href="story.html?name=Sam+Rebelsky&color=blue">.

Some Applications of Query Strings

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

Exercise: A custom story.

This page written by Samuel A. Rebelsky.

This page generated on 45 by SamR's Site Suite.