Edited at

jQueryを使わないでGETのパラメータ付きURLを生成する

More than 3 years have passed since last update.


追記:

URLSearchParams - Web APIs | MDNが使えるならそっちの方が便利。


Search Param付きURL生成

いよいよjQueryを使う必要がなくなってきており、$.ajaxは滅多に使わなくなり、fetchを書くことが増えた。しかし、POSTはまだしもGETでパラメータを送りたい場合、$.ajaxでは

var data = {

a:1,
b:2,
c:3
};
$.ajax({
url:'hogehoge',
method:'GET',
data:data
});

とやればよかったものが、fetchの場合はパラメータのkeyとvalueを&で繋いでURLにくっつけるのを自前でやらねばならない。特にURLにSearch Paramsがある場合は?以降を切った後に繋ぎ直さねばならず面倒くさい。

どうにかならないかと調べてみたところ、anchor要素を使うのが良さそうだった。

anchor要素のhrefにURLを入れると、searchプロパティに?以降の文字列が入る。?以降がなければ空文字となる。

(他にhash#以降の文字列が入るし、pathnameにはドメイン以下のパスが入る)

そして書き換えるとhrefにも自動的に反映される。

そこで、

var data = {

a:1,
b:2,
c:3
};
var a = document.createElement('a');
a.href = url;
var queryArray = [];
Object.keys(data).forEach(function (key) { return queryArray.push(key + '=' + encodeURIComponent(data[key])); });
a.search = '?' + queryArray.join('&') + a.search.replace(/^\?/, '&');
alert(a.href);

Search Paramsが存在すれば?&に置換し、存在しなければ空文字なのでそのまま後ろに連結してやれば良い。

この時のa.hrefがパラメータ付きのURLとなる。


参考

HTMLAnchorElement - Web API インターフェイス | MDN