PHP Kod: Kodu kopyalamak için üzerine çift tıklayın!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
style="color: #007700">>
<html xmlns="
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
style="color: #007700">>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>Ajax ile veri ekleme-listeleme</title>
</head>
<body>
<script type="text/javascript">
var d;
var url;
function startUp()
{
d= new Array( document.getElementById('adi'), document.getElementById
('soyadi'), document.getElementById('tel'));
}
function createRequestObject()
{
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer")
ro = new ActiveXObject("Microsoft.XMLHTTP");
else
ro = new XMLHttpRequest();
return ro;
}
var http = createRequestObject();
function ajax(url,funcAdi)
{
http.open("GET",url,true);
http.onreadystatechange = funcAdi;
http.send(null);
}
function gonder()
{
startUp();
for(var i=0;i<d.length; i++)
{
if ( d[i].value == '')
{
alert.('Lütfen alanı doldurunuz');
d[i].focus();
return false;
}
}
url = 'ekle.php?adi='+d[0].value
+ '&soyadi='+d[1].value
+ '&tel='+d[2].value;
ajax(url,ekle);
}
function ekle()
{
startUp();
if(http.readState == 4)
{
if(http.responseText)
{
if ( http.responseText == 'true')
{
alert('Ekleme işlemi başarıyla gerçekleştirildi');
oku();
for(var i=0,i<d.length; i++)
d[i].value ='';
}
else
{
alert(http.responseText);
}
}
}
}
function kaybol()
{
document.getElementById('satirlar').innerHTML = '';
}
function oku()
{
url = 'oku.php?rand='+ Math.random();
var html = '';
var i;
http.open("GET",url,true);
http.onreadystatechange = function dataGetir()
{
if(http.readyState == 4)
{
veri = null;
if(http.responseText)
{
veri = eval("("+http.responseText+");");
html = '<table width="400" border="1" align="center" cellpadding="0" cellspacing="0">'
+ '<tr>'
+ '<td>No</td>'
+ '<td>Adı</td>'
+ '<td>Soyadı</td>'
+ '<td>Telefon</td>'
+ '<td>Tarih</td>'
+ '</tr>';
for(i=0; i<veri.s.length; i++)
{
html = html + "<tr>"
+ "<td>" + (i+1) + "</td>"
+ "<td>" + veri.s[i].data.adi + "</td>"
+ "<td>" + veri.s[i].data.soyadi + "</td>"
+ "<td>" + veri.s[i].data.tel + "</td>"
+ "<td>" + veri.s[i].data.tarih + "</td>"
+ "</tr>";
}
html = html + "</tr>"
+ "<td colspan='5' align='center'>"
+ "<input type='button' value='kaybol' onclick='kaybol()'>"
+ "</td>"
+ "</tr>"
+ "</table>";
document.getElementById('satirlar').innerHTML = html;
}
else
{
alert("hata");
}
}
}
http.send(null);
}
</script>
<form id="form1" name="form1">
<table width="400" border="0" align="center" cellpanding="0" cellspacing="0">
<tr>
<td>Adı</td>
<td><input name="adi" type="text" id="adi" /></td>
</tr>
<tr>
<td>Soyadı</td>
<td><input name="soyadi" type="text" id="soyadi" /></td>
</tr>
<tr>
<td>Tel</td>
<td><input name="tel" type="text" id="tel" /></td>
</tr>
<tr>
<td> </td>
<td><input type="button" name="Submit" value="Gönder" onclick="gönder()" />
<input type="button" value="Verileri göster" onclick="oku()" />
</td>
</tr>
</table>
</form>
<span id="satirlar"></span>
</body>
</html>
Yukarıda ki komut yapısı biraz karmaşık görünüyor olsa da, aslında kod yapısını fonksiyon fonksiyon değerlendirirsek o kadar da karışık yapısı olmasa gerek.Şimdi bu örnekteki fonksiyonları teker teker açıklayım.
PHP Kod: Kodu kopyalamak için üzerine çift tıklayın!
var d;
function startUp()
{
d= new Array(
document.getElementById('adi'),
document.getElementById('soyadi'),
document.getElementById('tel'),
);
}
Burada form alanında yer alan text alanları tanımlayıp, bu alanları kullanmak istediğimizde bu fonksiyonu çağırıyoruz. Bunu yapmamızda ki amaç; aynı tanımlamaları birden çok yapmamak.
PHP Kod: Kodu kopyalamak için üzerine çift tıklayın!
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer")
ro = new ActiveXObject("Microsoft.XMLHTTP");
else
ro = new XMLHttpRequest();
return ro;
}
var http = createRequestObject();
Burada sunucu teknolojisine erişim sağlayabilmek için IE ve Mozilla türevi tarayıcılar için http adında bir obje oluşturdum. Bu objeyi tüm kod alanında kullanacağız.
PHP Kod: Kodu kopyalamak için üzerine çift tıklayın!
function ajax(url,funcAdi)
{
http.open("GET",url,true);
http.onreadystatechange = funcAdi;
http.send(null);
}
Bu komutta ise ilk örneğimizde olduğu gibi verileri göndereceğimiz JavaScript fonksiyonu yer almakta.
PHP Kod: Kodu kopyalamak için üzerine çift tıklayın!
function gonder()
{
startUp();
for(var i=0;i<d.length; i++)
{
if ( d[i].value == '')
{
alert.('Lütfen alanı doldurunuz');
d[i].focus();
return false;
}
}
url = 'ekle.php?adi='+d[0].value
+ '&soyadi='+d[1].value
+ '&tel='+d[2].value;
ajax(url,ekle);
}
Bu fonksiyonda ise formdan gelen dataların eksik olup olmadıgını kontrol ediyoruz. Şayet veriler eksiksiz bir şekilde doldurulmuşsa veri ekleme URL'sini oluşturup AJAX fonksiyonuna , çalıştıracağı fonksiyon adı ile birlikte gönderiyoruz.
PHP Kod: Kodu kopyalamak için üzerine çift tıklayın!
function ekle()
{
startUp();
if(http.readState == 4)
{
if(http.responseText)
{
if ( http.responseText == 'true')
{
alert('Ekleme işlemi başarıyla gerçekleştirildi');
oku();
for(var i=0,i<d.length; i++)
d[i].value ='';
}
else
{
alert(http.responseText);
}
}
}
}
Yukarıdaki fonksiyonda ise verileri ekle.php dosyasına gönderip bu dosyanın cıktısına bakarak veri girişi yapılıp yapılmadığına dair bir uyarı verdiriyoruz. Ekle.php dosyasına şayet veriler başarılı bir şekilde eklendiyse true çıktısı verdiğinden burada çıktının true olup olmadıgına bakarak veri girişi yapılıp yapılmadıgını kontrol ediyoruz. Böylece veri girişi yapıldıgında oku fonksiyonu çağırılarak veritabanında yer alan datalar Array şekline alınıp JaScript ile HTML tablosu üretiliyor.