Cara mengambil data GET dari URL dengan javascript

Sebelum ke pembahasan utama, kira-kira menurut kamu apakah yang disebut data GET itu? Ya benar, data GET merupakan sebuah data yang dikirimkan dari form lewat sebuah URL, cara ini biasanya bisa dilakukan oleh form yang mepunyai method GET. Tapi tanpa form pun untuk cara ini kamu masih tetap bisa menuliskan parameternya secara manual dengan format :

http://example-domain.com?firstname=kang&lastname=cahya

Setelah nama domain kamu harus menambahkan tanda tanya (?) dan kemudian setelahnya di iringi dengan penulisan parameter yang kamu inginkan. Jika parameter yang ingin kamu kirim lebih dari satu, kamu bisa menambahkan simbol dan (&), seperti yang terlihat pada contoh URL diatas. Disana terdapat 2 parameter GET, yaitu firstname dan lastname, sampai disini saya harap kamu dapat memahaminya.

Tapi inti dari tulisan bukanlah itu, disini saya akan membahas seputar "bagaimana cara mengambil data GET dari URL dengan javascript". Mungkin jika menggunakan PHP akan sangat sederhana untuk melakukan hal ini, kamu cukup menggunakan $_GET untuk mengambil data GET dari URL. Beda dengan javascript, disini kita tidak punya fungsi langsung (setahu saya) seperti yang tersedia pada PHP. Maka dari itu untuk melakukan hal ini kita memerlukan sebuah fungsi dimana fungsi itu kita sendiri yang buat.

SEBUAH FUNGSI

Ini adalah fungsi yang saya buat sendiri, dimana kegunaan dari fungsi ini adalah untuk mengambil data GET yang tersemat di URL. Kurang lebih seperti ini fungsinya :

function getUrlVars(param=null)
{
	if(param !== null)
	{
		var vars = [], hash;
		var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
		for(var i = 0; i < hashes.length; i++)
		{
			hash = hashes[i].split('=');
			vars.push(hash[0]);
			vars[hash[0]] = hash[1];
		}
		return vars[param];
	} 
	else 
	{
		return null;
	}
}

MENGGUNAKAN FUNGSI

Asumsikan kita sedang berada dihalaman web dengan URL seperti ini :

http://example-domain.com?firstname=kang&lastname=cahya

Lalu kamu ingin mengambil data GET yang ada di URL tersebut dengan fungsi yang telah di buat tadi. Seperti ini caranya :

var param1 = getUrlVars("firstname");
alert(param1);

var param2 = getUrlVars("lastname");
alert(param2);

Kamu cukup sebutkan nama parameternya didalam fungsi tadi, contohnya seperi pada sintak diatas, maka value dari parameter tersebut akan otomatis terambil.

LIVE CODE

Ini adalah live code yang saya posting di jsfiddle :



PENUTUP

Mungkin untuk tulisan ini saya cukupkan sampai disini dulu, semoga bermanfaat.

Tschuss...