JavascriptでURLパラメータを取得する

こんばんは。きわさです。

URLパラメータを設定

HTTPのリクエストでは、POSTだけでなくGETの場合もパラメータを渡すことができます。
例えば、http://sample.com/sample.htmldataというパラメータにtestという値を渡す場合は、
http://sample.com/sample.html?data=testとなります。
複数ある場合は
http://sample.com/sample.html?data=test&data2=testのように、&で区切って記述します。

URLパラメータを取得

次は取得する場合です。
javascriptで以下のような関数を作ります。

function getQueryParams() {
    // 連想配列を宣言
    var params = {};

    // URLの?以降の文字列を&で区切って取得
    var query = document.location.search.substring(1).split('&');

    // &で区切った文字列の数だけ繰り返す
    for(var i = 0; i < query.length; i++) {
        // =で区切る
        var param = query[i].split('=');

        // =の左側(key)と右側(value)を取得する
        if((param[0] != "") && (param[1] != "")) {
            var key = decodeURIComponent(param[0]);
            var value = decodeURIComponent(param[1]);

            // 連想配列に追加
            params[key] = value;
        }
    }

    // 連想配列を返却
    return params;
}

function getQueryValue(key) {
    // クエリ文字列(URLパラメータ)の連想配列を取得
    var params = getQueryParams();

    // 指定したkeyと一致するvalueを返却
    return params[key];
}

2つ関数を作りました。
getQueryParams()では、URLパラメータすべてを含む連想配列を取得でき、
getQueryValue()では、指定したkeyの値を取得できます。
用途によっては、keyが一致しない場合なども考慮しないといけません。このままではundefinedが帰ります。

スポンサーリンク