how do we add url parameters? (EJS + Node + Express)

Question

I understood how we parse the url parameters in express routes, as in the example

How to get GET (query string) variables in Express.js on Node.js?

But where do the url parameters come from in the first place?

EDIT:

Apparently, I can build such a query with jquery (i.e $.get). I can append params to this query object. It s cool, but still i m trying to understand how we achieve this in the query that renders the page as a whole.

An example : when i choose the oldest tab below, how does SO add ?answertab=oldest to the url so it becomes :

https://stackoverflow.com/questions/30516497/how-do-we-add-url-parameters-ejs-node-express?answertab=oldest#tab-top

Do you mean how to add the request params in the browser or how to add it in node to request stuff form other servers? They're almost but not quite the same. The browser has the added complexity of where the data that you want to pass as query param comes from. — slebetman, May 28 '15 at 21:23
@slebetman edited the question with an example, i think it s clearer now. Thanks! — Orkun, May 28 '15 at 21:34
For the SO example you ask about, the answer is simple. The complete string simply includes the `"?answertab=oldest"`. In other words, the tab looks something like this in the source file: `oldest`. There really is nothing special about it. It's just a string — slebetman, May 29 '15 at 01:35

score 3 · Answer 1 · answered May 28 '15 at 21:20

The string you're looking at is a serialization of the values of a form, or some other such method of inputing data. To get a sense of this, have a look at jQuery's built in .serialize() method.

You can construct that string manually as well, and that's pretty straight forward as well. The format is just ?var1=data1&var2=data2 etc. If you have a JSON object {"name": "Tim", "age": 22} then you could write a very simple function to serialize this object:

function serializeObject(obj) {
    var str = "?";
    for(var i = 0; i < Object.keys(obj).length; i++) {
        key = Object.keys(obj)[i];
        if (i === Object.keys(obj).length - 1)
            str += encodeURIComponent(key) + "=" + encodeURIComponent(obj[key]);
        else
            str += encodeURIComponent(key) + "=" +  encodeURIComponent(obj[key]) + "&";
    }
    return str;
}

Running seralizeObject({"name": "Tim", "age": 22}) will output '?name=Tim&age=22'. This could be used to generate a link or whatnot.

pii_ke · Accepted Answer · 2015-05-28T23:12:55.093

The page author writes them so. This is how they "come in the first place". The authors of an HTML page decide (or are told by website designers) where to take the user when he clicks on a particular anchor element on it. If they want users to GET a page with some query parameters (which their server handles), they simply add query string of their choice to the link's href attribute.

Take a look at the href attribute of the oldest tab you clicked:

<a
 class="youarehere"
 href="/questions/30516497/how-do-we-add-url-parameters-ejs-node-express?answertab=oldest#tab-top"
 title="Answers in the order they were provided"
>
 oldest
</a>

When you clicked it, the browser simply took you to path indicated in href attribute /questions/30516497/how-do-we-add-url-parameters-ejs-node-express?answertab=oldest#tab-top relative to the base URL http://stackoverflow.com. So the address bar changed.

stackoverflow.com may have its own system of generating dynamic HTML pages. Their administrators and page authors have configured their server to handle particular query parameters and have put in place their own methods to make sure that links on their pages point to the URL(including query string) they wish.

You need to provide URIs with query strings of your choice (you can build them using url.format and querystring.stringify) to your template system to render. Then make your express routes process them and generate pages depending on their value.

how do we add url parameters? (EJS + Node + Express)

2 Answers2