What is the best practice to grab any url params from the URL?

Question

I'm curious, what is the best practice to grab any url params from the URL ?

Example

http://localhost:8080/BIM/teacher/reports/chapter-quiz/assignment?assessmentId=206a9246&classroomId=722bfadb

The goal is to grab the value of :

assessmentId
classroomId

1. Make a parseUrl function

function parseUrl(url) {
    var urlParamSplit = url.split("?");

    if (urlParamSplit.length !== 2) {
        return "InvalidUrlNoParamsSet";
    }

    var paramsList = urlParamSplit[1].split("&");
    if (paramsList.length < 1) {
        return "InvalidUrlNoParamsFound";
    }

    var paramsObj = {};
    paramsList.forEach(function(item) {
        var keyValueArray = item.split("=");
        paramsObj[keyValueArray[0]] = keyValueArray[1];
    });

    return paramsObj;
}

var params = parseUrl(href);



console.log(params.assessmentId) // 206a9246
console.log(params.classroomId) // 722bfadb

2. Grab it from hidden input

Throw this in the HTML page

<input id="assessmentId" type="hidden" value="<c:out escapeXml="true" value="${param.assessmentId}" />" />
<input id="classroomId" type="hidden" value="<c:out escapeXml="true" value="${param.classroomId}" />" />




console.log($("#assessmentId").val()) // 206a9246
console.log($("#classroomId").val())  // 722bfadb

So far, I've tried 2 approaches,they both give me the data I wanted, but I'm not sure which one, I should use.

If there's other approach that I should consider that please kindly suggest.

Doesn't the second method use the function from the first method? — FWDekker, Jul 20 '15 at 17:15
I would suggest using a URL parser such as [URI.js](https://medialize.github.io/URI.js/) — rink.attendant.6, Jul 20 '15 at 17:56
The first approach is definitely better [if done correctly](http://stackoverflow.com/q/979975/1048572). The second does require some serverside processing, what you've shown us is *not a HTML page*. — Bergi, Jul 20 '15 at 18:04

score 1 · Answer 1 · edited May 23 '17 at 12:06

I think the first method is more powerful if you have several parameters to grab from the url, or if you have some parameters that generate dynamicly instead of the second method in this case (dynamic params) you have to loop and create inputs also dynamicly.

Short : use the first method if you have several parameters to grap or dynamicly generated parameter, use the second if you have less parameters (static & controlables parameters).

For more solutions/ideas this link & this one may help you.

score 1 · Answer 2 · answered Jul 20 '15 at 17:57

if the http request is going to change/add something in the server you should use POST request(not in your case)

if the http request is going to grab something using some data given by the client you should use GET query parameter to pass data to the server

What is the best practice to grab any url params from the URL?

Example

1. Make a parseUrl function

2. Grab it from hidden input

2 Answers2