jQuery:Sayfa yenilenmeden AJAX ile veri eklemek

Başlıktan da anlayacağınız gibi bu yazımda bir form ile sayfa yenilenmeden veri eklemeyi görüceğiz. Veriyi eklemek için dil olarak PHP’yi kullanacağım fakat ASP’de kullansanız mantık aynı.

Öncelikle jQuery ile gelen ajax fonksiyonumuza bir göz atalım;

1.jQuery.ajax({
2.type: 'POST',//Bu kısım POST ve GET değerlerinden birini alabilir
3.url: 'veri_isle.php',//Verinin gönderileceği sayfa
4.data: 'veri=verimiz&veri_iki=verimiz_iki',//Sorgu cümlesi
5.error:function(){ $('#yazdir').html("Bir hata algılandı."); }, //Hata alınırsa ekrana bastırılacak veri
6.success: function(veri) { $('#yazdir').html(veri);}//Başarılı olursa ekrana bastırılacak veri
7.});

Şimdi bu kod parçasını kullanarak basitçe verilerimizi veri_isle.php sayfamıza post ediceğiz.

1.<form id="veri-formu">
2.<input name="veri"/> - <input name="veri_iki"/>
3.<input type="button" onclick="gonder();" value="Gönder"/>
4.</form>
5.
6.<div id="yazdir"></div>

HTML formumuzu oluşturduk. Şimdide verilerimizi POST methodu ile gönderecek fonksiyonumuzu oluşturalım.

01.function gonder() {
02.jQuery.ajax({
03.type: 'POST',//Bu kısım POST ve GET değerlerinden birini alabilir
04.url: 'veri_isle.php',//Verinin gönderileceği sayfa
05.data: $('#veri-formu').serialize(),
06.error:function(){ $('#yazdir').html("Bir hata algılandı."); }, //Hata alınırsa ekrana bastırılacak veri
07.success: function(veri) { $('#yazdir').html(veri);}//Başarılı olursa ekrana bastırılacak veri
08.});
09.}

Şimdi burada değinmediğim bir nokta var data: ‘veri=verimiz&veri_iki=verimiz_iki’ bu gördüğünüz kısma tabikide sırayla giriş tanımlayıp daha sonra o girişleri veri yerine yerleştirmeyeceğiz daha kısa bir yolu var.

1.$('#veri-formu').serialize();

Gördüğünüz kod parçası sayesinde id değeri veri-formu olan formdan giriş (input) isimlerini ve değerlerini (value) okur sonuç olarak aşağıdaki gibi bir sorgu cümlesi oluşturur.

veri=veri isimli girişe(input) girilen veri&veri_iki=veri_iki isimli girişe(input) girilen veri

Şimdide veri_isle.php sayfamızı oluşturalım.

01.function database($host,$username,$password,$database_name,$set_name){
02.
03.mysql_connect($host,$username,$password) or die("Hata");
04.
05.mysql_select_db($database_name) or die("Hata");
06.
07.mysql_query("SET NAMES '".$set_name."'");
08.
09.}
10.
11.//Database fonksiyon bitti.
12.
13.database("localhost","root","1234","vt adı","latin5");
14.
15.//Veritabanıma bağlandım.
16.
17.$veri = mysql_real_escape_string($_POST["veri"]);
18.
19.$veri_iki = mysql_real_escape_string($_POST["veri_iki"]);
20.
21.//Get ile gelen verimi aldım. Fakat ' şeklindeki karakterleri etkisiz hale getirmesini istedim.
22.
23.$sql = "INSERT INTO tablonuz (veri,veri_iki) VALUES ('$veri','$veri_iki')" ;
24.@mysql_query($sql) or die("Hata algılandı");

Bu sayfada verilerimi post ile aldım ve veritabanıma ekledim. Şimdi sayfaların son hallerine bakalım;

index.php sayfamız;

01.<html>
02.<head>
03.<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
04.<title>jQuery:Sayfa yenilenmeden AJAX ile veri eklemek</title>
05.<script type="text/javascript" src="jquery-latest.js"></script>
06.<script type="text/javascript">
07.
08.function gonder() {
09.jQuery.ajax({
10.type: 'POST',//Bu kısım POST ve GET değerlerinden birini alabilir
11.url: 'veri_isle.php',//Verinin gönderileceği sayfa
12.data: $('#veri-formu').serialize(),
13.error:function(){ $('#yazdir').html("Bir hata algılandı."); }, //Hata alınırsa ekrana bastırılacak veri
14.success: function(veri) { $('#yazdir').html(veri);}//Başarılı olursa ekrana bastırılacak veri
15.});
16.}
17.
18.</script>
19.</head>
20.
21.<body>
22.
23.<form id="veri-formu">
24.<input name="veri"/> - <input name="veri_iki"/>
25.<input type="button" onclick="gonder();" value="Gönder"/>
26.</form>
27.
28.<div id="yazdir"></div>
29.
30.</body>
31.
32.</html>

veri_isle.php sayfamız;

01.function database($host,$username,$password,$database_name,$set_name){
02.
03.mysql_connect($host,$username,$password) or die("Hata");
04.
05.mysql_select_db($database_name) or die("Hata");
06.
07.mysql_query("SET NAMES '".$set_name."'");
08.
09.}
10.
11.//Database fonksiyon bitti.
12.
13.database("localhost","root","1234","vt adı","latin5");
14.
15.//Veritabanıma bağlandım.
16.
17.$veri = mysql_real_escape_string($_POST["veri"]);
18.
19.$veri_iki = mysql_real_escape_string($_POST["veri_iki"]);
20.
21.//Get ile gelen verimi aldım. Fakat ' şeklindeki karakterleri etkisiz hale getirmesini istedim.
22.
23.$sql = "INSERT INTO tablonuz (veri,veri_iki) VALUES ('$veri','$veri_iki')" ;
24.@mysql_query($sql) or die("Hata algılandı");
Bu yazı Kod Dünyası kategorisine gönderilmiş ve , , ile etiketlenmiş. Kalıcı bağlantıyı yer imlerinize ekleyin.

jQuery:Sayfa yenilenmeden AJAX ile veri eklemek için 4 cevap

  1. ahmet der ki:

    aradıgımz bişeyi bulamıyorzz ya ne biçim bisite:@

  2. mehmet der ki:

    en önemli olan verilerin listeleneceği sayfayı yazmamışsınız !!!

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>