13.07.2014
4.80 / 5 oy

How To Get Query Value With Javascript?

Getting query values from url's are crucial data transferring methods for webmasters. Despite there are many efficient ways of getting query values from server side (asp.net, php, ...), sometimes we still need to get query values from client side (like javascript).

In the following example, we will try to get 1 or more query values with Javascript/Jquery.

Get Query Value With Javascript/Jquery

Our script block:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var qs = (function (a) {
if (a == "") return {};
var b = {};
for (var i = 0; i < a.length; ++i) {
var p = a[i].split('=');
if (p.length != 2) continue;
b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
}
return b;
})(window.location.search.substr(1).split('&'));
</script>

<script>
$(document).ready(function () {
$("#queryValue").text(qs["q"]);
});
</script>

And html block:

<div>
your query value is <span id="queryValue"></span>
</div>

And the output will be like:

query

Get More Than 1 Query Values With Javascript/Jquery

 Ok, sometimes we need to get more than 1 query value. For example, if we need to get day, month and year data of a datetime seperately with queries:

Our script block:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var qs = (function (a) {
if (a == "") return {};
var b = {};
for (var i = 0; i < a.length; ++i) {
var p = a[i].split('=');
if (p.length != 2) continue;
b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
}
return b;
})(window.location.search.substr(1).split('&'));
</script>

<script>
$(document).ready(function () {
$("#day").text(qs["day"]);
$("#month").text(qs["month"]);
$("#year").text(qs["year"]);
});
</script>

And our html block:

<div>
Day: <span id="day"></span><br />
Month: <span id="month"></span><br />
Year: <span id="year"></span>
</div>

Finally, our output will be like this:

date query

How To Get Query Value With Javascript?
Bu makalenin telif hakkı ve tüm sorumlulukları yazara ait olup, şikayetler için lütfen bizimle iletişime geçiniz.
URL:
Etiketler:

Bu makale 1423 kez okundu

13.07.2014 tarihinde yazıldı
Reitix

Yorumlar

  • olcayp
    18.02.2016

    p'nin lenght değeri 2 olunca ne oluyo ona takıldım ben

  • zaza
    08.01.2016

    wtf is query value dude?

  • ismil taş
    29.12.2015

    jquery solves everything :)

  • Veysel79
    29.04.2015

    tarayiciya mudahale etmek kolay oldugu icin bu tip denetimleri sunucuya yaptirmak gerekir bence

  • soneraci
    11.12.2014

    o zaman query değerini sunucu tarafından aldırarak sistemi yoracağıma tarayıcıdan aldırır yükü browser'a aktarırım, pek ala!

Bu yazıya siz de yorum yapabilirsiniz

İnternet sitemizdeki deneyiminizi iyileştirmek için çerezler kullanıyoruz. Bu siteye giriş yaparak çerez kullanımını kabul etmiş sayılıyorsunuz. Daha fazla bilgi.