En Çok Kullandığım AJAX Fonksiyonu

Elimde ne varsa sizinle paylaşmaya devam ediyorum. jQuery ve AJAX ile güçlendirdiğim projelerimde en çok kullandığım fonksiyonu sizlere sunmak isterim.

Bu Javascript fonksiyonunun görevi form verilerini bir dosyaya göndermek ve dosyadan gelen cevaba göre işlem yapmak. Yani bildiğiniz AJAX. Müsadenizle önce kodu göstereyim, sonra kısa bir açıklama yapayım.

function ekle(){ 

	//Form verileri gönderilmek için uygun formata dönüştürülüyor.
	var sc = $('#yeni_kayit_formu').serialize() ; 

	// #ekleniyor isimli div'de "Yükleniyor..." yazısı yazıyoruz.
	$('#ekleniyor').html('Yükleniyor...'); 

	$.ajax({
		type: "POST",
		url: "ekle.php",
		data: sc,
		success: function(msg){
		if (msg=="ok")
			{
			//Dosyadan gelen cevap "ok" ise #ekleniyor isimli div'e "Kayıt Eklendi!" yazdırıyoruz.
			$('#ekleniyor').html("Kayıt Eklendi!");
			}
		else
			{
			//Dosyadan gelen cevap "ok" değil ise #ekleniyor isimli div'e gelen cevabı yazıyoruz.
			$('#ekleniyor').html( msg );
			}
	   }
	});
}

Uygulamanıza jQuery kütüphanesini dahil ettikten sonra bu fonksiyonu kullanarak bir PHP dosyasına veri gönderip gelen cevabı değerlendirebilirsiniz. Veri gönderilen PHP dosyası da şöyle olabilir.

<?php
include('../../ayar.php');

// Eğer ismini yazmamışsa $sonuc değişkeni "ok"'den farklı bir değer alıyor.
if ($_POST['isim']=='') $sonuc="Lütfen başlık yazınız.";

if (!$sonuc)
{
$sql = "INSERT INTO kisiler VALUES ($_POST[isim])";
mysql_query($sql);

// Eğer ismini yazmışsa $sonuc değişkeni "ok" değerini alıyor.
$sonuc="ok";
}

// $sonuc değişkenini gönderiyor.
echo $sonuc;

?>

Yine kodun içinde gerekli açıklama mevcut.

Size kodu göstermek için girdileri en az ve basit seviyede tutmaya çalıştım. Lütfen güvenliği eksik, olmaz böyle şey falan gibi yorumlar yapmayın. Hepsinin farkındayım, farkındayız. Yeter ki konuyu öğrenmeye çalışan arkadaşlar işin mantığını anlasınlar ;)

Not: ytelefon | Yakuter Telefon Defteri Betiği isimli uygulamamda da bu kodun çalışan şeklini görebilir ve uygulamanın kaynak kodlarını indirerek dosyaları inceleyebilirsiniz.

Benzer Yazılar

yakuter

Erhan Yakut

www.yakuter.com

Genç yaşlarda programlama ile tanıştı ve Delphi ile başladığı programlama macerasına şuanda PHP, SQL, Javascript, AJAX, CSS, XHTML teknolojileri ile devam etmektedir. Elektrik - Elektronik bölümü mezunu olan "yakuter" 2006 yılından itibaren yakuter.com'un yazarlığını yapmaya başlamıştır.

Bu Yazıya Ait Yorumlar

Fatih

Fatih
23 Mart 2009

Bugün bir coşku geldi buraya Erhan, Rss Reader’ımız doldu taştı, mutlu olduk, hep böyle devam :)

kedi  adam

kedi adam
23 Mart 2009

Merhaba çalışmalarınızda başarılar diliyorum. Internet üzerinde (ç)alıntılama yöntemi ile kısa sürede popüler olmaye heves edinmiş kişilerin yeterli beyin fonksiyonu gösteremediği bir ortamda fikir üretmek, üretilen fikri başkaları ile paylaşmak ve inatla paylaşıma devam edebilmek son derece önemli. Türk internet ağının web teknikleri konusundaki gelişimi için önemli katkılar sunuyorsunuz. Paylaşımlarınızı ilgi ile takip ediyorum.

Dinibilgiler

Dinibilgiler
23 Mart 2009

Ajax ‘a yeni başladığım için bu bilgilere ihtiyacım olacak teşk.

yakuter

yakuter
23 Mart 2009

Ne mutlu bana ki başkalarını mutlu edebilmişim :)

Ali OKTAY

Ali OKTAY
24 Mart 2009

Basit ve güzel bir paylaşım. Javascript ve AJAX konusunda hiç bilgim yok diyebilirim. Ama başlangıç için yararlanacağım ilk konu bu olacak…
Bu tarz yararlı ve temel bilgileri paylaştığın için bende teşekkür ederim.

Berker Peksağ

Berker Peksağ
26 Mart 2009

Form işlemleri için benim uzun süredir kullandığım form eklentisini de önerebililirim:

http://malsup.com/jquery/form/

yakuter

yakuter
26 Mart 2009

Evet bu eklenti de gayet başarılıdır, severim kendisini ;)

mahir yılmaz

mahir yılmaz
02 Nisan 2009

Gelen veriyi değerlendirme olayı gerçekten çok güzel. Teşekkürler.

Ertuğrul Erkan

Ertuğrul Erkan
12 Nisan 2009

Merhaba hocam. Makaleniz için çok teşekkür ederim benzer bir şekilde bende fonksiyon yaptım fakat bunu daha protetif hale getirmek mümkün mü? Yani ekle fonksiyonu şu şekile çevirebilir miyiz?;

$(document).ready( function(){
$('#giris :submit').click( islem('girisislem.php') );
$('#kayit :submit').click( islem('kayitislem.php') );
});

function islem(adres) {
url: adres,

tabi bu kısaltılmış ama mantık olarak böyle birşeyi nasıl yapabiliriz? Ben deniyorum ama sürekli sayfayı yeniliyor.

yakuter

yakuter
12 Nisan 2009

@Ertuğrul, bunun için birkaç deneme yapmam lazım. Ayrıca yorumlarla bunun cevabını vermek pek mantıklı olmaz. Bir ara makale yazarım ;)

Ertuğrul Erkan

Ertuğrul Erkan
13 Nisan 2009

Anladım hocam. Merak etmiştim mantık sorunu nerede diye o yüzden sordum. Eğer ki yapılabilirse çok sağlam ve ufak bir ajax fonksiyonu çıkacak ortaya :)

Fatih

Fatih
22 Nisan 2009

Bu AJAX zimbirtisini kullanarak başka bir domainden veri almak mumkun degil mi ? Yani;
$.ajax({
type: “GET”,
url: “www.baskadomain.com/baska.php”

diyemez miyiz ?

yedincisenol

yedincisenol
15 Mayıs 2009

Harika bir script teşekkürler.

yakuter

yakuter
15 Mayıs 2009

script değil betik :)

thr

thr
12 Ağustos 2009

hocam birkaç haftadır yana yakalı jquery html vs ne varsa öğrenmeye çalışıyorum sayende çok yol aldım teşekkür ederim. Allah razı olsun.

dreams24

dreams24
06 Mart 2010

Fatih Sormuş;
22 Nisan 2009, 01:23

Bu AJAX zimbirtisini kullanarak başka bir domainden veri almak mumkun degil mi ? Diye..

Evet Ajaxla başka domainde veri alamayız.. Ancak PHP cURL file_get_contentsfonksiyonlarıyla aldığımız bilgileri görüntüleyebiliriz ancak… Ajax Javanın derlenmiş halidir..Javascriptin yapabildiğini yapar..

erdem arslan

erdem arslan
01 Nisan 2010

erhan hocam;
bu yakuter telefon defteri betiğinde vardı, yukarıdaki js fonksiyonunda index.php ye yönlendiriyordu 1sn sonra. setTimeout(“window.location=’index.asp’;”,1000); şeklinde. mesela üye giriş formunda bunu kullanmak istiyorum ancak ben burada yönlendirilen adresi formdan gelecek form elemanından almak istiyorum. bu js kodlarında nasıl bir düzenleme yapmak lazımdır acaba? çok mühim bir konuya cevap olcaktır :)

Emin

Emin
21 Haziran 2010

Hocam sağolasın paylaşıma devam…

Azrul

Azrul
04 Temmuz 2010

Selamar;
Her yerde post get metodlarıyla ilgili işlemler gösterilmiş güzel ama örnegin bir kayıt formu veya login için flood yemeden ,timer gibi aşılır güvenlik kodu gibi hantal yollar dışında neler yapabiliriz.bunun cevabını almadan nasıl uygulamaları yayına sokabiliriz ki?

orçun

orçun
20 Temmuz 2010

bunun bir script olmadığını iyice belirtmek lazım bence. mazallah direkt kullanımda xss den yakar adamı. copy paste yaparken dikkat

boranjudge

boranjudge
12 Ağustos 2010

İlginç birşeyle karşılaştım, yerel sunucuda kayıt düzenlendi – kayıt eklendi gibisinden belirtmelerde bulunurken web sunucusunda sadece ok diyerek yönlendirme işlemini gerçekleştirmiyor js yolları kontrol ettim, kodları inceledim, önbelleği temizleyerek, tarayıcı ayarlarını kontrol ederek denedim ama sorun çözülmedi. Nasıl çözebilirim ?

Peki ya sizin düşünceleriniz?

Facebook Grubumuz Twitter Wordpress Linked in Google Friendfeed RSS Beslemesi Feedburner RSS

Abonelik

Yazılan yazılardan ilk siz haberdar olun, yeni yazılar e-postanıza gönderilsin.

yakuter.com © 2006-2010 Erhan Yakut. Site tasarım Cenk Akyıldız - (Tema Bilgisi). Hosting sponsoru WebGrup.
Site içerisindeki içerikler izinsiz kopyalanamaz, alıntı yapılamaz.

WordPressValid XHTML 1.0 TransitionalBu web sitesi ne kadar popüler?php