Merhaba arkadaşlar. Bu yazıda sizlere JQuery kullanarak aynı sayfa içinde bir başka deyişle sayfayı yenilemeden PHP ile GET metodunun kullanımını anlatmaya çalışacağım.
Daha önceki yazımda sizlere sayfayı yenilemeden aynı sayfada bir DIV elementinin içeriğini dinamik olarak değiştirmeyi anlatmıştım. Eğer okumadıysanız öncelikle onu okumanızı tavsiye edeceğim ki yazının bundan sonrasını da o yazıdaki kodların bir kısmını temel alarak yazmaya çalışacağım.
Hatırlayacağınız gibi o yazımda da öncelikli olarak JQuery’i çağırmış ve sonra da içeriği değişecek bir div oluşturmuştum. Şimdi yine benzer işlemleri yapıyorum. Boş bir php sayfası açıp aşağıdaki kodları ekliyorum
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script> <div id='icerik'>Tıklanan bağlantıya göre bu divin içeriği değişecek</div>
JQuery’i çağırdık ve icerik id’sine sahip tıkladığımız linke göre GET metoduyla içeriğini dolduracağım bir div oluşturduk.
Şimdi tıklandığında GET metodunu kullanmamızı sağlayacak linkimizi oluşturalım.
<a class='get_ornek' id='1.Değer' href='#'>1. Değer</a> <br> <a class='get_ornek' id='2.Değer' href='#'>2. Değer</a> <br> <a class='get_ornek' id='3.Değer' href='#'>3. Değer</a> <br>
Gördüğünüz gibi aynı sınıfa ait 3 link ekledik. Her bir linke de farklı 3 id ekledik ki bu id’ler get metodunu kullanarak başka bir sayfaya göndereceğimiz değerleri barındırıyorlar.
Daha önceki yazımda da bahsettiğim gibi bu tür işlerin birden farklı ve bu anlattığımdan daha profesyonel yöntemleri olabilir ancak bence başlangıç için en iyi anlaşılacak olan yöntem bu.
Şimdi de linklerimize tıklandığında istediğimiz eylemi gerçekleştirecek script kodumuzu yazalım.
<script type="text/javascript">
$(document).ready(function(){
$(".get_ornek").click(function(){
var goster = $(this).attr('id');
$.get( "ornek2.php", { getir:goster },function(getVeri){
$('#icerik').html(getVeri);
});
});
});
</script>
Kodumuzu yukarıdaki gibi yazdıktan sonra şimdi de açıklayalım.
İlk önce yazdığımız script’in ne zaman çalışacağını belirtiyoruz. Anlayacağınız gibi get_ornek sınıfından bir elemana (bizim durumumuzda bunlar linkler oluyor ama siz isterseniz düğme, div ya da aklınıza gelen başka şeyleri kullanabilirsiniz.) tıklandığında script harekete geçecek
Ardından goster adında bir değişken tanımlıyor ve bu değişkenimize değer olarak tıklanan linkin sahip olduğu id’yi atıyoruz.
Bunlardan sonra get metodunu kullanarak ornek2.php sayfasına getir parametresiyle goster değişkenini göndereceğimizi ve bunu yaparken de getVeri fonksiyonunu çalıştıracağımızı belirtiyoruz.
Buradaki script dilinde yazılan $.get( "ornek2.php", { getir:goster } kafanızı karıştırdıysa bu kodun php ile nasıl yazıldığını gösternek sanırım konuyu daha hızlı kavramanızı sağlayacaktır. <a href='ornek2.php?getir=$goster'>...</a> İşte biz java script ile bu kodun yaptı işlevi yaptık. Eğer java script yerine bunun gibi yaparsak sayfayı yenilememiz hatta ornek2.php’ye gitmemiz gerekecekti ve biz de içinde bulunduğumuz sayfadan ayrılmak zorunda kalacaktık.
En sonunda da getVeri fonksiyonuyla ne yapacağımızı yazdık. Burada da icerik id’sine sahip div’imizin içine getVeri fonksiyonundan gelen html’i yani ornek2.php’yi çağıracağımızı belirttik.
Sonuçta sayfamız aşağıdaki gibi oldu
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<div id='icerik'>Tıklanan bağlantıya göre bu divin içeriği değişecek</div>
<a class='get_ornek' id='1.Değer' href='#'>1. Değer</a>
<br>
<a class='get_ornek' id='2.Değer' href='#'>2. Değer</a>
<br>
<a class='get_ornek' id='3.Değer' href='#'>3. Değer</a>
<br>
<script type="text/javascript">
$(document).ready(function(){
$(".get_ornek").click(function(){
var goster = $(this).attr('id');
$.get( "ornek2.php", { getir:goster },function(getVeri){
$('#icerik').html(getVeri);
});
});
});
</script>
Yukardaki kodları ornek1.php olarak kaydedelim. Şimdi de linklere tıklandığında get metodunu kullanacağımız ve kodumuzu test edebileceğimiz ornek2.php sayfasını oluşturalım.
<?php $gelen_veri = $_GET['getir']; echo "Linke tıklandı ve GET ile gönderilen değer : $gelen_veri"; ?>
Yukarıdaki ornek2.php kodumuzda önce gelen_deger isminde bir değişken oluşturduk ve değişkenimize get metoduyla gelen getir değişkenini atadık. Sonrada ornek1.php sayfasındaki div’in içinde gösterilmek üzere işlemimizi doğru yaptığımızı görmemizi sağlayacak yazımızı yazdık
Şimdi iki sayfamızı da aynı dizin altına kopyalayarak ornek1.php yi açarak test edelim. Gördüğümüz gibi linklerimiz çalışıyor ve tıkladığımız linke göre div’in içinde ilgili linkin id’si yazıyor. ve sayfamız da yenilenmiyor ya da değişmiyor.
Eğer birden fazla değişkenle get metodu kullanmak isteseydik nasıl olacaktı? Bunun çeşitli yolları var. Bunlardan biri de gönderilen tek id’ye bütün değerleri, arada bir özel karakter kullanarak atayarak göndermek. Örneğin sayfaya hem 6 hem de mavi değerlerini göndermek istersek id = 6;mavi şeklinde gönderir ve bunu da php’nin explode özelliği ile noktalı virgüllerden ayırabiliriz. Ya da hiç uğraşmadan değerleri id yerine linke çeşitli data parametreleri vererek de yapabiliriz. Bunların da script kodunda birden fazla değişken olması demek olduğunu da belirtelim. Her yöntemin kendine göre avantajları ya da dezavantajları var. Hangisi kolayınıza geliyorsa onu seçebilirsiniz.
Bir sonraki yazımda da POST metodunun aynı sayfada, sayfa yenilennmeden nasıl kullanılacağından bahsedeceğim. Şimdilik hoşçakalın