lostyazilim

jQuery ve Ajax İşlemleri 1 - POST Metodu

11 Mesajlar 10.309 Okunma
lstbozum
wmaraci reklam

cudjex cudjex ozergul.net Kullanıcı
  • Üyelik 23.11.2011
  • Yaş/Cinsiyet 31 / E
  • Meslek öğrenci
  • Konum İzmir
  • Ad Soyad Ö** G**
  • Mesajlar 1647
  • Beğeniler 347 / 570
  • Ticaret 8, (%100)
Merhaba arkadaşlar.Kendimce ufak ufak örnekler ile ajax işlemlerinden bahsetmek istiyorum.Ajax işlemi kabaca sayfa yenilenmeden veri alışverişi olarak adlandırılabilir.

jQueryde ajax işlemeri yapılırken $.ajax fonksiyonundan faydalanılır.

Bu fonksiyonun 20 üzeri parametresi vardır ama bize lazım olacak olan,en azından başlangıç seviyesi için bilinmesi gereken parametreler aşağıdadır.
type: Yapılacak isteğin türü : POST veya GET olabilir
url: Yapılacak isteğin adresi : ajax.php , ?action=arama vs olabilir
data: İstek sırasında gönderilecek bilgi örneğin bir input değeri veya ad=ozer&soyad=gul şeklinde olabilir.
success: İsteğin sonucu başarılı olursa yapılacak işlemler vs..

Basit bir toplama işlemi formunun ajax parametreleri üzerinden gidecek olursak

function _toplamHesapla() {
$.ajax({
type: 'POST',
url: 'isle.php',
data: $('form#ornekform').serialize(),
success: function(hesapCevap) {
$('#sonuc').html(hesapCevap);
}
});
}

Bu ajax isteği POST tipindedir,verileri isle.php ye yollar,veri olarak da ornekform id sine sahip form u serialize eder(o formun içindeki her girdi).Ve de istekten dönen sonuçları #sonuc sınıfının içinde gösterir.

Formun html yapısı şu şekildedir :
Ben ajax isteğini yapmak için _toplamHesapla() adından bir fonksiyon oluşturdum ve submit fonksiyonuna onclick ile ekledim.








isle.php
ise şöyle :

error_reporting(E_ALL & ~E_NOTICE);
ini_set('error_reporting', E_ALL & ~E_NOTICE);

$birinci = $_POST[ "birinci_sayi" ];
$ikinci = $_POST[ "ikinci_sayi" ];
if($birinci == '') {
echo "Birinci sayıyı giriniz";
} elseif($ikinci == '') {
echo "İkinci sayıyı giriniz";
}else {
$sonuc = $birinci + $ikinci;echo $sonuc;
}
?>


Sade bir şekilde anlatmaya çalıştım.Bu ajax işlemleri tahmin ettiğiniz gibi zor birşey değildir.
Demo için buraya,dosyaları indirmek için ise buraya tıklayınız.Yazı adresi
 

 

ozergul.net/com
wmaraci
reklam

3579 3579 WM Aracı Anonim Üyelik
  • Üyelik 30.01.2012
  • Yaş/Cinsiyet - /
  • Meslek
  • Konum
  • Ad Soyad ** **
  • Mesajlar 2434
  • Beğeniler 686 / 1151
  • Ticaret 1, (%100)
if($birinci == '') de boş değer olmasın yapılmış ama, formda space tuşu ile boşluk bırakınca da gönderiliyor. Trim() ile sağ-sol boşlukları temizleyebilirsiniz, ya da is_numeric($birinci) == false şeklinde numeric olup olmadığını kontrol edebilirsiniz. Bazen bu tarz işlemlerde bu ufak önlemler alınmaz ise, veritabanına kayıt sırasında da ufak tefek aksaklıklar çıkabilir. Tabi sadece iki ufak örnekten bahsettim, int,isset vb yöntemlerle de yapabilirsiniz. :)

Teşekkürler, güzel paylaşım. Bilmeyenler için sürekli ders eklerseniz çok iyi olur. :)
 

 

cudjex cudjex ozergul.net Kullanıcı
  • Üyelik 23.11.2011
  • Yaş/Cinsiyet 31 / E
  • Meslek öğrenci
  • Konum İzmir
  • Ad Soyad Ö** G**
  • Mesajlar 1647
  • Beğeniler 347 / 570
  • Ticaret 8, (%100)

Kakarotto adlı üyeden alıntı

if($birinci == '') de boş değer olmasın yapılmış ama, formda space tuşu ile boşluk bırakınca da gönderiliyor. Trim() ile sağ-sol boşlukları temizleyebilirsiniz, ya da is_numeric($birinci) == false şeklinde numeric olup olmadığını kontrol edebilirsiniz. Bazen bu tarz işlemlerde bu ufak önlemler alınmaz ise, veritabanına kayıt sırasında da ufak tefek aksaklıklar çıkabilir. Tabi sadece iki ufak örnekten bahsettim, int,isset vb yöntemlerle de yapabilirsiniz. :)

Teşekkürler, güzel paylaşım. Bilmeyenler için sürekli ders eklerseniz çok iyi olur. :)


hocam naptın bilemeyenlerden bahsediyoz ilk başta ben de is_numeric vs ekledim ama baktım çok uzadı kodlar,teşekkürler devamı gelicek :)
3579

kişi bu mesajı beğendi.

ozergul.net/com

brkrtp brkrtp Mobile App Developer Kullanıcı
  • Üyelik 24.08.2013
  • Yaş/Cinsiyet 31 / E
  • Meslek Mobile App Developer
  • Konum İstanbul Anadolu
  • Ad Soyad B** K**
  • Mesajlar 964
  • Beğeniler 269 / 251
  • Ticaret 31, (%97)
Göndermek istediğimiz veriler formla degil de değişken ise nasıl gönderebiliriz?
 

 

wmaraci
wmaraci

YazilimMimari YazilimMimari Eski adi: Turgay Can Kullanıcı
  • Üyelik 25.06.2012
  • Yaş/Cinsiyet 38 / E
  • Meslek Engineering Director
  • Konum İstanbul Avrupa
  • Ad Soyad T** C**
  • Mesajlar 771
  • Beğeniler 2 / 260
  • Ticaret 0, (%0)
jquery ile değeri ilgili html component üzerinden alıp, data string^inize eklmeniz yeterlidir.



var componentVal = ('#componentId').val();

data: 'componentVal = ' + componentVal;

gibi.
 

 

https://www.linkedin.com/in/turgaycan/
Kaliteli kod yazılır.. (Günlük/Saatlik ücreti ile)

brkrtp brkrtp Mobile App Developer Kullanıcı
  • Üyelik 24.08.2013
  • Yaş/Cinsiyet 31 / E
  • Meslek Mobile App Developer
  • Konum İstanbul Anadolu
  • Ad Soyad B** K**
  • Mesajlar 964
  • Beğeniler 269 / 251
  • Ticaret 31, (%97)

Turgay Can adlı üyeden alıntı

jquery ile değeri ilgili html component üzerinden alıp, data string^inize eklmeniz yeterlidir.



var componentVal = ('#componentId').val();

data: 'componentVal = ' + componentVal;

gibi.


http://www.yakuter.com/30-saniyede-ajax-ogrenin/

Şuradaki methot ilgimi çekti, ve daha basit geldi bunla alakalı birşey sormak istiyorum. Çıktıyı yer divine basıyor
Fakat ben bir sayfada birden çok link çıkartıyorum. Ve hepsinin yer divi farklı yer12 yer13 yer19 gibi gibi fakat ben bu fonksyondaki cevap fonksiyonunu 'yer'+ deger yapınca olmuyor. Çıktıyıda nasıl deger değişkenine atayabilirim?
 

 

YazilimMimari YazilimMimari Eski adi: Turgay Can Kullanıcı
  • Üyelik 25.06.2012
  • Yaş/Cinsiyet 38 / E
  • Meslek Engineering Director
  • Konum İstanbul Avrupa
  • Ad Soyad T** C**
  • Mesajlar 771
  • Beğeniler 2 / 260
  • Ticaret 0, (%0)

brkrtp adlı üyeden alıntı

http://www.yakuter.com/30-saniyede-ajax-ogrenin/

Şuradaki methot ilgimi çekti, ve daha basit geldi bunla alakalı birşey sormak istiyorum. Çıktıyı yer divine basıyor
Fakat ben bir sayfada birden çok link çıkartıyorum. Ve hepsinin yer divi farklı yer12 yer13 yer19 gibi gibi fakat ben bu fonksyondaki cevap fonksiyonunu 'yer'+ deger yapınca olmuyor. Çıktıyıda nasıl deger değişkenine atayabilirim?


bunun için yapılacak şey.

sen post işlemini backend'e yani php ise php sayfana gönderip, backedn'den bir cevap aldığında success metodunun kod bloğu içine düşer.

bu blog içinde backend'den döneceğininiz dataya göre, ilgili divlerin id'lerini data içinde verebilirsiniz yada backend'den döneceğiniz datanın içinde siz ilgili divleri oluşturup, öyle arayüze append edebilirsiniz.


data tipiniz JSON olur ise backend'den dönen datayı rahatça yönetebilirsiniz.

Linkteki örnek çok eski. Daha güncel örnekleri inceleyiniz.


http://labs.jonsuh.com/jquery-ajax-php-json/

örneği inceleyin, hatta kaynak kodunu kendi projenize entegre edin. Oldukça şık bir örnek + demosuda mevcut.
 

 

https://www.linkedin.com/in/turgaycan/
Kaliteli kod yazılır.. (Günlük/Saatlik ücreti ile)

brkrtp brkrtp Mobile App Developer Kullanıcı
  • Üyelik 24.08.2013
  • Yaş/Cinsiyet 31 / E
  • Meslek Mobile App Developer
  • Konum İstanbul Anadolu
  • Ad Soyad B** K**
  • Mesajlar 964
  • Beğeniler 269 / 251
  • Ticaret 31, (%97)

Turgay Can adlı üyeden alıntı

bunun için yapılacak şey.

sen post işlemini backend'e yani php ise php sayfana gönderip, backedn'den bir cevap aldığında success metodunun kod bloğu içine düşer.

bu blog içinde backend'den döneceğininiz dataya göre, ilgili divlerin id'lerini data içinde verebilirsiniz yada backend'den döneceğiniz datanın içinde siz ilgili divleri oluşturup, öyle arayüze append edebilirsiniz.


data tipiniz JSON olur ise backend'den dönen datayı rahatça yönetebilirsiniz.

Linkteki örnek çok eski. Daha güncel örnekleri inceleyiniz.


http://labs.jonsuh.com/jquery-ajax-php-json/

örneği inceleyin, hatta kaynak kodunu kendi projenize entegre edin. Oldukça şık bir örnek + demosuda mevcut.


Turgay bey linki inceledim ve json hakkında araştırmalarımıda yaptım ama sanırım kafam basmıyor. Bildiğiniz gibi
function islemlink(deger) {
http.open('get', 'test.php?degisken=' + deger);
http.cevapFonksiyonu;
http.send(null);
}


Bu fonksiyonla ajax ile istediğim şekilde veri gönderebiliyorum. Fakat buradaki değeri başka bir fonksiyonda kullanmıyorum doğal olarak diğer adımda işimi function cevapFonksiyonu() {
if(http.readyState == 4){
document.getElementById('yer').innerHTML = http.responseText;
}
}

Bu cevap fonksiyonu geliyor bu ikisini bir türlü birleştiremedim. yer divini de deger sayısına bağlı olarak dinamik hale getirmem lazım. gönderilen veri 1 ise gelen veriyi yer1 divine yazmalı bu konuda bana nasıl yardımcı olabilirsiniz?
 

 

YazilimMimari YazilimMimari Eski adi: Turgay Can Kullanıcı
  • Üyelik 25.06.2012
  • Yaş/Cinsiyet 38 / E
  • Meslek Engineering Director
  • Konum İstanbul Avrupa
  • Ad Soyad T** C**
  • Mesajlar 771
  • Beğeniler 2 / 260
  • Ticaret 0, (%0)

brkrtp adlı üyeden alıntı

Turgay bey linki inceledim ve json hakkında araştırmalarımıda yaptım ama sanırım kafam basmıyor. Bildiğiniz gibi
function islemlink(deger) {
http.open('get', 'test.php?degisken=' + deger);
http.cevapFonksiyonu;
http.send(null);
}


Bu fonksiyonla ajax ile istediğim şekilde veri gönderebiliyorum. Fakat buradaki değeri başka bir fonksiyonda kullanmıyorum doğal olarak diğer adımda işimi function cevapFonksiyonu() {
if(http.readyState == 4){
document.getElementById('yer').innerHTML = http.responseText;
}
}

Bu cevap fonksiyonu geliyor bu ikisini bir türlü birleştiremedim. yer divini de deger sayısına bağlı olarak dinamik hale getirmem lazım. gönderilen veri 1 ise gelen veriyi yer1 divine yazmalı bu konuda bana nasıl yardımcı olabilirsiniz?



Yukarıda belirttiğim örnek üzerinden yapınız basit bir örnek. Eğer bir sıkıntı olursa, html kodlarınızı ve yapmak istediğinizi yazın. Yukarıda belirttiğim örnek üzerinden beraberce burada javaascript kodunu yazarız. backend tarafındada php ile yazıyorsanız, json parser kullanmak gerekir. Ondada sıkıntı olursa, beraber yazarız ;)
 

 

https://www.linkedin.com/in/turgaycan/
Kaliteli kod yazılır.. (Günlük/Saatlik ücreti ile)

brkrtp brkrtp Mobile App Developer Kullanıcı
  • Üyelik 24.08.2013
  • Yaş/Cinsiyet 31 / E
  • Meslek Mobile App Developer
  • Konum İstanbul Anadolu
  • Ad Soyad B** K**
  • Mesajlar 964
  • Beğeniler 269 / 251
  • Ticaret 31, (%97)

Turgay Can adlı üyeden alıntı

Yukarıda belirttiğim örnek üzerinden yapınız basit bir örnek. Eğer bir sıkıntı olursa, html kodlarınızı ve yapmak istediğinizi yazın. Yukarıda belirttiğim örnek üzerinden beraberce burada javaascript kodunu yazarız. backend tarafındada php ile yazıyorsanız, json parser kullanmak gerekir. Ondada sıkıntı olursa, beraber yazarız ;)

<script>

function begen(id)
{
$.ajax({
type:'GET',
url:'fbegen.php',
data: {id: id},
success:function(cevap){
var get = document.getElementById('begen'+id);
get.parentNode.removeChild(get);
var OK = document.createElement('OK');
OK.innerHTML = 'Takip Edildi';
document.getElementById(id).appendChild(OK);
}

});
}

</script>


Yazı burada ... Katıl!


Başka bir yazı burada aynı sayfada... Katıl!


Bu şekilde get methodu ile gönderebiliyorum fakat dönen veriyi yazmıyor.
 

 

wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al