JavaScript プログラミング

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

2018年10月5日

こんにちは!シミダイ(@shimidai2100)です。

フォームから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© shimidai2100 , 2020 All Rights Reserved.