JavaScript

[JQuery] GETリクエスト時に空のinputパラメータを送信しない方法

2018年10月5日

こんにちは!土門大貴(daikidomon)です。

フォームからGETリクエストをする時に値が空のパラメータがあると、空でクエリーを送信することになります。

不要なクエリーは送信するとURLが長くなり見栄えも悪くなります。

そんな時は「cleanQuery」を使用することで不要なクエリーを削除してGETリクエストを送信できますので紹介します。

cleanQueryの使用方法

cleanQuery」はguimihanuiさんがGithub上で公開しているJQueryの追加機能になります。

参考jquery.cleanQuery.js
/*
* 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);
上記のコードを読み込んだ後に以下のようにformのidを指定します。
$('#form_id').cleanQuery();

cleanQueryの解説

JQueryの「serialize」を利用することで利用することで実装しています。

一度すべての要素をシリアライズして空のクエリーは削除しています。

参考.serialize()

参考値が空のパラメータがクエリー文字列に入らないGETのフォーム

 

関連記事

-JavaScript

Copyright© スタートアップIT企業社長のブログ , 2020 All Rights Reserved.