How can I pass data through a link using just javascript and HTML?

Question

I have a website where I have a list of names and I need to open up a new page when a name is clicked. I need this page to display data from the name clicked, so I'm going to need to pass some data through the link. This could be done with PHP, but can I do it with just HTML and Javascript? There has to be a way to handle dynamic content without server-side logic.

EDIT: I'd like to clarify that the entire purpose of this website is to use an existing website's API in a way that is more streamlined. I just want to tweak their setup and as such writing server logic seems excessive, since I need no persistent data (use the API for that). This question is about how I should pass the API data around the various pages of this custom front end.

Answer 1

You can set uri parameters inline like so:

<a href="example.com?name=sarah"> Sarah</a>// add a '?' followed by any number of parameters in the format of 'key=value'

You use a question mark to represent the beginning of variables then you can add as many as you would like (with a limit but its pretty high)

example.com?key1=value1+key2=value2...

Answer 2

Take a look at this method:

You can pass the data in the query string as:

http://www.yourwebsite.com?name=About

You can use this function to get data from the query string:

function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

The getUrlVars() function will return:

{
    "Name"    : "About"
}

Now, you can print it anywhere using javascript like:

document.getElementById('p').innerHTML(getUrlVars()["name"]);

or

document.write(getUrlVars()["name"]);

Answer 3

There are a few options, but in general believing that you can change what the server sends down without server side logic is illogical. What logic would the server use to make changes?

However, if you are serving up the same page but simply changing the names on it, one thing you could do is make the page send down static content without names anywhere and simply put

<span class='name-of-linked-user'></span>

wherever the name should appear. At that point, have the link for john doe go to "page.html?name=john%20doe" and add some static jquery to the page. From http://www.jquerybyexample.net/2012/06/get-url-parameters-using-jquery.html copy the get url parameter code of:

function GetURLParameter(sParam)
{
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++) 
{
    var sParameterName = sURLVariables[i].split('=');
    if (sParameterName[0] == sParam) 
    {
        return sParameterName[1];
    }
}
}​

and then a simple jquery loop goes through the static content making it 'dynamic'

$('.name-of-linked-user').each(function(){
  $(this).text(GetURLParameter('name'));
});