JQuerye Giriş
JQuery, Sihirli dolar ($)işağreti ve operasyonlar zinciridir. Aslında Javascript ve CSS bilginiz varsa çok hoşunuza gidebilir.
33,311 Okunma 3 Yorum 07/07/2011 18:40:09 18/02/2014 22:11:40
Bu konuyu resmi jQuery dökümanında olduğu gibi 3 başlık altında anlatmak istiyorum:
Bir AJAX isteği oluşturmak için $.ajax()
fonksiyonundan faydalanıyoruz. Yapacağımız işlemin türüne göre bu fonksiyona farklı farklı seçenekler belirtmek durumundayız. Bu seçeneklerden en temel olanlarını kısaca inceleyelim:
$.ajax()
fonksiyonundan ve onun alabileceğini seçeneklerden de bahsettiğimize göre artık bunların nasıl kullanıldığına geçelim. Örnek uygulamamızda “google-backlink.php” sayfasına “url=www.eburhan.com” bilgisini GET yöntemi ile gönderip sonucu alacağız. Aldığımız sonucu ise ID özniteliği "sonuc" olan DIV
etiketi içerisinde göstereceğiz.
$.ajax({
type: 'GET',
url: 'google-backlink.php',
data: 'url=www.eburhan.com',
success: function(ajaxCevap) {
$('#sonuc').html(ajaxCevap);
}
});
Bu örnek uygulamanın çalışır halini Örnek 1A sayfasında bulabilirsiniz.
jQuery ile AJAX isteği oluşturmanın çok daha kısa yolları da vardır. Bu yollar $.get()
ve $.post()
fonksiyonlarından geçiyor. Fonksiyon isimlerinden de anlaşılacağı üzere GET türünde bir istek için $.get()
fonksiyonunu, POST türünde bir istek için $.post()
fonksiyonunu kullanabiliriz. Bir önceki örnek uygulamanın $.get()
fonksiyonu ile nasıl yapılabileceğini görelim:
$.get(
'google-backlink.php',
{url: 'www.eburhan.com'},
function(ajaxCevap){
$('#sonuc').html(ajaxCevap)
}
);
$.get()
fonksiyonunda öncelikle istek yapılacak sayfayı, daha sonra ise bu sayfaya gönderilecek bilgiyi belirtiyoruz. Sonra da geri dönen cevabı bir fonksiyon içerisinde işliyoruz. Çalışır halini Örnek 1B sayfasında görebilirsiniz.
şimdi de herhangi bir web sayfasının içeriğini kendi web sayfamıza kolayca entegre edebilmemizi sağlayan $.load()
fonksiyonunu inceleyelim. Örneğimizde "delicious-eburhan.php" diye bir dosyamız olsun. Bu dosyanın görevi, Del.icio.us isimli dünyaca ünlü sosyal imleme sitesinde saklamış olduğum son 10 bağlantıyı göstermek olsun. Biz bu gösterimi $.load()
fonksiyonu ile kendi sayfamızda yer alan DIV
etiketi içerisinde yapacağız.
$('#sonuc').load('delicious-eburhan.php');
işte bu tek satırlık kod yardımıyla "delicious-eburhan.php" dosyasının tüm içeriğini web sayfamızdaki DIV
etiketi içerisine yüklemiş oluyoruz. Gerçekten kolay değil mi? Bu örneğin çalışır halini Örnek 1C sayfasında bulabilirsiniz.
Bu yazının başındaki örnekte (Örnek 1A) success isimli bir seçenek kullanmıştık. Bu seçeneğin görevi, bir AJAX isteği başarılı olarak tamamlandıktan sonra bizim herhangi bir işlem yapabilmemizi sağlamaktı. Bu seçeneği her AJAX isteğinde kullanmak için her defasında belirtmemiz gerekiyor. Oysaki biz böyle tekrarlara düşmeyelim diye jQuery bize "ajax olayları" diye bir olanak sunmuş. Alttaki örneğe bakalım:
$("#sonuc").ajaxSuccess(function(){
$(this).html('ajax isteği başarılı');
});
Bu örnekte, web sayfamızdaki bütün AJAX istekleri başarıyla sonuçlandığı zaman ID özniteliği "sonuc" olan bir elemanın içerisine "ajax isteği başarılı" mesajı yazılacaktır. Yani ayrıyeten herbir $.ajax()
fonksiyonu içerisinde belirtmemize gerek kalmamıştır.
Örneği test etmek için Örnek 2A sayfasına bakabilirsiniz.
jQuery kütüphanesi içerisindeki ajax olayları şöyledir:
Küçük bir örnekle de ajax olayları konusunu geçmek istiyorum. Hepiniz AJAX kullanan web sitelerinde bunlar gibi yükleniyor (loading) resimleri görmüşsünüzdür. işte böyle birşey oluşturmak için ajaxStart isimli olayı kullanabiliriz. Böylece herhangi bir AJAX isteği başladığında web sayfanızın bir yerinde yükleniyor resmi gösterebilirsiniz
$("div#yukleniyor").ajaxStart(function(){
$(this).html('
');
});
Bu örneğin uygulamasını da Örnek 2B sayfasında görebilirsiniz.
Bu başlık altında ajaxSetup()
ve serialize()
isimli iki fonksiyonu inceleyeceğiz.
Yardımcı fonksiyonlar sayesinde AJAX işlemlerini daha da kolaylaştırabilirsiniz. Örneğin web sayfanızda birden fazla $.ajax()
fonksiyonu kullanmışsınız fakat bu fonksiyonun bazı seçenekleri hep tekrar etmiş. Oysaki ajaxSetup()
yardımcısı ile bu tekrar eden seçenekleri baştan belirleyebiliyoruz. Böyle olunca da her $.ajax()
fonksiyonuna aynı seçenekleri tekrar tekrar girmekten kurtulmuş oluruz.
$.ajax({
type: 'GET',
url: 'google-backlink.php',
data: 'url=www.eburhan.com',
success: function(ajaxCevap) {
$('div#sonuc').html(ajaxCevap);
}
});
$.ajax({
type: 'GET',
url: 'google-backlink.php',
data: 'url=www.yakuter.com',
success: function(ajaxCevap) {
$('div#sonuc').html(ajaxCevap);
}
});
şimdi yukarıdaki iki koda bakalım. Bu kodların ikisi de aynı web sayfasında bulunuyor. Dikkat ettiyseniz "type", "url" ve "success" seçenekleri her ikisinde de ortak. Oysaki ajaxSetup()
yardımcısı ile bu ortak ifadelerin tek bir yerde toplanması sağlanabiliyor. Böylece kodlarımız daha temiz görünüyor.
$.ajaxSetup({
type: 'GET',
url: 'google-backlink.php',
success: function(ajaxCevap) {
$('div#sonuc').html(ajaxCevap);
}
});
$.ajax({ data: 'url=www.eburhan.com' });
$.ajax({ data: 'url=www.yakuter.com' });
Böylesi daha iyi değil mi Test etmek isterseniz Örnek 3A sayfasına bakabilirsiniz.
şimdi de form alanlarında sıklıkla kullanacağımız serialize()
yardımcısına geçelim. Bu yardımcı sayesinde bir forma girilen bütün bilgiler sorgu cümleciği (query string) haline otomatik olarak dönüştürülürler. Bu sorgu cümleciğini herhangi bir sayfaya bilgi gönderirken kullanırız. şimdi alttaki gibi basit bir formumuz olduğunu varsayalım:
Girilen örnek bilgilerle beraber bu kodların ekran görüntüsü alttaki gibi olacaktır:
şimdi de serialize()
yardımcısını kullanarak bu formdaki bilgileri bir sorgu cümleciği haline dönüştüren kodu yazalım:
$('form).serialize();
Bu kodu çalıştırdığınızda altaki gibi bir sorgu cümleciği elde etmiş olacaksınız. Kendiniz test etmek isterseniz Örnek 3B sayfasına da bakabilirsiniz.
isim=Erhan&site=eburhan.com&sehir=izmir
Artık serialize()
yardımcısı ile oluşturduğumuz bu sorgu cümleciğini istediğimiz gibi kullanabiliriz. Özellikle de bir formdaki bilgileri kullanarak bir AJAX isteği yaptığımızda bu yardımcı işimizi çok kolaylaştıracaktır. Öyleyse bir AJAX isteğinde bu yardımcı nasıl kullanıyor ona da bakalım ve bu yazıya da son noktayı koymuş olalım
$.ajax({
type: 'POST',
url: 'form-isle.php',
data: $('form').serialize(),
success: function(ajaxCevap) {
$('#sonuc').html(ajaxCevap);
}
});
JQuery, Sihirli dolar ($)işağreti ve operasyonlar zinciridir. Aslında Javascript ve CSS bilginiz varsa çok hoşunuza gidebilir.
33,311 Okunma 3 Yorum 07/07/2011 18:40:09 18/02/2014 22:11:40
Bir select kutusu içerisindeki optionları ajax ile alıp yüklemek için yapmamız gerekenler.
22,324 Okunma Henüz yorum yapılmamış 30/09/2012 04:44:27 14/01/2019 01:01:03
Jquerynin bize sağlıcağı en büyük kazanç şüpesiz farklı browserlar için tek kod kullanmak.
21,878 Okunma Henüz yorum yapılmamış 26/07/2011 12:12:10 17/10/2016 01:27:42
Jquery kullanırken yardımcı olacak bir kaç detay...
20,997 Okunma Henüz yorum yapılmamış 18/08/2018 13:33:35 11/04/2020 03:22:50
Uygulamada jQuery(Ajax), PHP ve MySQL kullanacağız.
19,735 Okunma 3 Yorum 17/07/2011 00:59:09
Bir nesenin tetiklenmesini sağlayan olay çeşitleri
19,129 Okunma Henüz yorum yapılmamış 15/01/2014 20:55:49
Jquery, javascript ile hep yapmak isteyip, karışık JS programlama dili yüzünden bir türlü yapamadığınız kodlamayı çok kolay ve hızlıca yapmanızı sağlayan javascript kütüphanesidir.Diğer bir güzel yanı da jquery ile yazılan kodun tüm popüler tarayıcılarda sorunsuz çalışmasıdır, sizin kod üzerinde tarayıcı uyumluluğu çalışması yapamanıza gerek yoktur.
18,880 Okunma Henüz yorum yapılmamış 21/06/2011 23:58:55 08/11/2014 23:59:12
JQuery tüm özellikleriyle bu şemalarda saklı.
17,920 Okunma Henüz yorum yapılmamış 03/12/2012 02:27:58 03/12/2012 02:30:15
PHP ile dosya yükleme işlemi yaparken kullanıcılara Upload durumunun hangi aşamada olduğunu yüzdesel olarak veya bir progres bar ile göstermek elbette daha güzel olur.
15,431 Okunma Henüz yorum yapılmamış 03/02/2015 16:45:48 12/06/2015 18:50:46
2,836 Okunma Henüz yorum yapılmamış 31/12/2018 00:11:43 31/12/2018 00:13:04