Cara Mengambil Data Get Dari Url Dengan J4vascript

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

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

Setelah nama domain kau harus menambahkan tanda tanya (?) dan lalu setelahnya di iringi dengan penulisan parameter yang kau inginkan. Jika parameter yang ingin kau kirim lebih dari satu, kau sanggup menambahkan simbol dan (&), ibarat yang terlihat pada teladan URL diatas. Disana terdapat 2 parameter GET, yaitu firstname dan lastname, hingga disini saya harap kau sanggup memahaminya.

Tapi inti dari goresan pena bukanlah itu, disini saya akan membahas seputar "bagaimana cara mengambil data GET dari URL dengan j4vascript". Mungkin kalau memakai PHP akan sangat sederhana untuk melaksanakan hal ini, kau cukup memakai $_GET untuk mengambil data GET dari URL. Beda dengan j4vascript, disini kita tidak punya fungsi pribadi (setahu saya) ibarat yang tersedia pada PHP. Maka dari itu untuk melaksanakan hal ini kita memerlukan sebuah fungsi dimana fungsi itu kita sendiri yang buat.

SEBUAH FUNGSI

Ini yaitu fungsi yang saya buat sendiri, dimana kegunaan dari fungsi ini yaitu untuk mengambil data GET yang tersemat di URL. Kurang lebih ibarat 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 ibarat ini :

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

Lalu kau 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, misalnya seperi pada sintak diatas, maka value dari parameter tersebut akan otomatis terambil.

LIVE CODE

Ini yaitu live code yang saya posting di jsfiddle :



PENUTUP

Mungkin untuk goresan pena ini saya cukupkan hingga disini dulu, biar bermanfaat.

Tschuss...


Sumber http://www.kang-cahya.com

Share this post

Berlangganan update artikel terbaru via email: