[jQuery] 空のGETパラメータを送信しない方法

フォーム内の未入力の Input などのパラメータを精査する。

jQueryを使わない方法は、「[JavaScript] 空のGETパラメータを送信しない方法

少し前に「[PHP] GET で渡された空白パラメータを削除する方法」という記事を書いた。
これはサーバサイドでGETの値を直接操作する方法で個人的にあまりやりたくない方法だった。

そこでも書いているけれど、そもそもフロント側で空のパラメータは送信しなければ良いのでは無いかと考えていた。

方法

サブミット時に空のパラメータだけ削除して送信する。

jQueryプラグイン

結果として、軽く調べるとjQueryプラグインがあったので大人しくそれを使うことにする。

jQuery cleanQuery

$("form").cleanQuery();

使い方は、上記のように指定のフォームに対して cleanQuery()をあてがうだけ。

詳しい解説はHTML - 値が空のパラメータがクエリー文字列に入らない GET のフォーム - Qiitaにあったので引用しておく。

内部的には、サブミット時に以下の流れで処理をしている。

1. サブミットを中止
2. フォーム内のパラメータを取得
• 取得したパラメータから値が空のものを取り除く
3. 正規化したパラメータをフォームのactionにくっ付けて遷移させる(GET)

/*
 * jQuery cleanQuery 2013-03-23
 * Authored by guimihanui
 * Licensed under the MIT License (http://www.opensource.org/licenses/mit-license.php)
 */

(function ($) {
  function cleanQuery(query) {
    var arr = [];
    $.each(query.split("&"), function (i, param) {
      if (param.split("=")[1]) {
        arr.push(param);
      }
    });
    return arr.join("&");
  }

  $.fn.cleanQuery = function () {
    this.on("submit", function (event) {
      event.preventDefault();

      var query = cleanQuery($(this).serialize());
      location.href = this.action + "?" + query;
    });

    return this;
  };
})(jQuery);

改変

改悪かも。途中まで自分の作っていたコードもあったのだけれど、こちらのコードをベースに要件に沿うような形で改変させてもらった。(フォームを弄る別のソースと混ぜ込んだ形で使いたかったのでプラグインから切り離した)

$(".clean-query").on("submit", function (e) {
  e.preventDefault();

  var query = $(this).serialize();

  location.href =
    this.action +
    "?" +
    (function () {
      var arr = [];
      $.each(query.split("&"), function (i, p) {
        if (p.split("=")[1]) {
          arr.push(p);
        }
      });
      return arr.join("&");
    })();
});

やってる事は全く同じだけど、ここでしか使われないcleanQuery()を新たに記述するのもアレだったのでクロージャしてる。

普通に使うのであれば大人しくプラグインを使った方が良いかもしれない。