2018/05/11

Category :
Tags :
JavaScriptでGET形式のパラメータを取得する作業が何回か必要になったので
今後も使い回せるように関数化して忘れないようにまとめておく。
https://keprate.com/contact/shop/?plan=m&price=2
例えば上記のようなURLがありGET形式のパラメータがあるのでplanとpriceの値を取得したい。
(この場合はplanはm、priceは2である。)
まずはメインクラスのKepParamAnalysisClass。
(ParamAnalysisClassでも問題ないと思いますが念のため名前が被らないように接頭語としてKepを付加。)
function KepParamAnalysisClass() {
var t = this;
t.param = location.search.substring(1);
t.paramFlag = false;
t.paramObj = {};
t.paramArrLen;
if (t.param) t.paramFlag = true;
if (t.paramFlag) {
t.paramArr = t.param.split('&');
t.paramArrLen = t.paramArr.length;
var i = 0;
for (i = 0; i < t.paramArrLen; i++) {
var param = t.paramArr[i].split('=');
var vars = param[0];
var val = param[1];
t.paramObj[vars] = val;//キーで取り出せるように連想配列で格納
}
}
t.getIsParam = function() {
return t.paramFlag;
}
t.getParamVal = function(val) {
return t.paramObj[val];
}
}
ポイント
-
1行目:何回もURLを解析したくないので最初の一回だけURL解析。
var kpa = new KepParamAnalysisClass; -
5行目:location.href.split('?')[1]でもパラメータ箇所取得できるがlocation.search.substring(1)で取得。
少し処理軽くなる程度。 -
28行目:getParamVal()の引数にキーを渡すと値が返ってくる。
現状、キーを渡すと値が取得できれば問題ないので下記のfunctionのみ用意。
- getIsParam();
- パラメータが存在するかどうか
ある場合:true、ない場合:false
- getParamVal()
- キーを渡すと値が返ってくる
下記のような感じで使用。
var kpa = new KepParamAnalysisClass();
if(kpa.getIsParam()){
//パラメータがある時の処理
var plan = kpa.getParamVal('plan');
var price = kpa.getParamVal('price');
}else{
//パラメータがない時の処理
}
- ※ソースの流用、改変は自由ですが自己責任とさせていただきます。
トラックバック URL
https://keprate.com/web/javascript/js-url-get-param/trackback/