jQuery Ajax İşlemi

Yazan Tarih 12 Şubat, 2015 Yorum yapılmamış

jQuery Ajax Nedir?

Bilmeyenler olabilir diye Ajax işlemi, sayfa yenilenmeden sunucuya istek göndermeye yaramaktadır. En basit örneğiyle kullanıcılar yaptığı işlemin sonucunu vakit açısından daha az sürede sonuçlanmaktadır.

jQuery kütüphanesi ile yapılmış bu fonksiyonun Ajax methodundan farklı tabiki yok sadece kullanım açısından jQuery “Daha Az Kod ile Daha Fazlası” sloganı gibi daha anlaşılır ve daha kullanılabilir bir fonksiyon haline getirmektedir.

Ajax ile Ne Yapılır?

Ajax ile hayal gücünüze bağlı olarak bir web sayfasında yapılabilecek her şey yapılır. En bilinen ve başlangıçta öğretilen İl,İlçe işlemi gibi, döviz hesaplama işlemi, hızlı arama listeleme bölümleri gibi sayamayacağımız bir çok şey Ajax ile yapılır. Çünkü temel mantığı dinamik içeriklerin sayfa yenilenmeden yüklenmesi sağlamaktadır.

Genelde ilk örnek olarak İl,İlçe seçimi verildiği için ben kullanıcı girişi örneğini size anlatmak istedim.

Ajax ile Kullanıcı Girişi

Form Değerleri:

E-posta adresi : eposta@eposta.com
Şifre : şifre

<?php session_start(); // Oturum değişkeni için ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Kullanıcı Girişi</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>

<body>

<?php if ( isset($_SESSION['ajax']) ){ // Buradaki if blogu örnek amaçlıdır işlemin yapıldığını anlamak açısından :) ?>
	<h2>Tebrikler! :-)</h2>
<?php } else { ?>
	<form id="formGiris">
		<label>
			<span>
				E-posta Adresi :
			</span>
			
			<input type="email" placeholder="E-posta adresiniz" name="uyeEposta" id="uyeEposta" />
		</label>
		
		<label>
			<span>
				Şifre :
			</span>
			
			<input type="password" placeholder="Şifreniz" name="uyeSifre" id="uyeSifre" />
		</label>
		<br />
		<button>Giriş Yap</button>
	</form>
<?php } ?>

<script type="text/javascript">
$(document).ready(function(){ // Sayfamız yüklendiğinde etki etmesini sağlamak için
	
	
	$('#formGiris').submit(function(event){ // Form Submit yani gönderildiğinde edildiğinde
		event.preventDefault();// Bu işlem mevcut fonksiyonun işlemi durdurmaya yaramaktadır.
		
		
		$.ajax({
			type: "POST",
			data:{ uyeEposta : $('#uyeEposta').val(), uyeSifre: $('#uyeSifre').val() },
			url: 'ajax.php',
			success: function(msg){
				if ( msg == 1 ){
					window.location.href = 'http://www.vyz.gen.tr/uygulamalar/javascript/jquery-ajax-kullanici-giris/'; // Anasayfa yönlendirilmesi 
				} else if ( msg == 2 ) {
					alert('Lütfen e-posta ve şifrenizi kontrol ediniz.');
				} else if ( msg == 3 ) {
					alert('Eksik veya hatalı değer gönderdiniz.');
				} else {
					alert('Bilinmeyen hata.');
				}
			}
		});
		
	});
	
});
</script>

</body>
</html>

Uygulama Örnek Sayfası

jQuery ile Kullanıcı Giriş Uygulamasını İndir

Paylaş:

Etiket