Jquery ile sırayla veri gönderip almak

Bazı javascript işlemlerinde elimizdeki veriyi sırayla işleme sokup sonuç almamız gerekebiliyor. Bu durumda verileri düzenli olarak göndermek için en basit ve en iyi yollardan biri verileri array nesnesine atayıp sırayla göndermek. Kısaca mantığı şöyledir; ilk işlem tetiklendikten sonra sonuç geldiğinde array nesnesindeki sonraki veriyi çekip tekrar işlemi başlatmak. Bu şekilde ard arda istek gönderilmediği için tarayıcı tarafında önbellek problemini de en aza indirmiş olacağız.

Jquery kütüphanesi, css ve html kodlarını sayfamıza ekledikten sonra işlemi yapacak kodlarımıza geçelim.

Kullanacağımız parametreleri tanımlıyoruz. Array nesnesine ister id değerlerini isterseniz string ifade ekleyebilirsiniz. Buraya ekleyeceğimiz değerleri sırayla işleme sokacağız.


    // Başlama sayısı
    var baslama = 0;
    
    // Sırası ile işlem yapılacak değerleri array'a atıyoruz.
    var array = [2,4,6,8,10,12,14,16,17,18,20]; // String ifade için örnek: ["Değer 1","Değer 2" ...]

    // Array'daki eleman sayısını bir değikene atayalım.
    var arraytoplam = array.length;

İşlem yapacak fonksiyonu hazırlayalım. Ben array’daki sayıları ajax.php sayfasına gönderiyorum. Siz istediğiniz sayfaya gönderebilirsiniz.


   // Ajax istediğinde çalışacak fonksiyonumuz
    function ajax(gelendeger,islemgenisligi){

         $.ajax({
	       type: 'GET',
	       url: 'ajax.php',
	       cache: false,
	       data: 'value=' + array[baslama],
	       error: '',
	       success: function (cevap){
				
			   // Gelen yanıtı sonuclar divinin sonuna ekliyoruz.
               $("#sonuclar").append(cevap);
               
               // Başlama değerini bir arttırıyoruz böylece array'daki sonraki elemanı buluyoruz.
               baslama++;

               // Barın genişliğini arttırıyoruz.
               $("#bar span").css("width",(islemgenisligi*baslama));
               
               // Başlama değeri array'daki eleman sayısına küçük yada eşit ise istek göndermeye devam et.
               if(baslama <= arraytoplam - 1){
                
                 // Ajax istediğini gönderiyoruz.
                 ajax(array[baslama],islemgenisligi); 
                
               }else{ // Değilse işlemin bittiğini bildir.
                  $("#sonuclar").append('<span style="color:green;font-weight:bold;">Tüm sayılar çarpıldı.</span>');
               }
			}
	    });	

    }
    

Burada önemli olan baslama değerini sonuç geldiğinde 1 arttırıyoruz ve eğer array’daki toplam eleman sayısından büyük değilse tekrar fonksiyonu çağırıyoruz.

İlk işlemi tetiklemek için sayfa yüklendiğinde fonksiyonu çağırıyoruz.


    $(document).ready(function(){

         // Barın genişliğini alıyoruz.
        var bargenislik = $("#bar").css("width").replace("px","");

        // Her işlem yapıldığında barın genişliğini ne kadar arttıracağımızı buluyoruz.
        var islemgenisligi = (bargenislik/arraytoplam).toFixed(2);

        // Kaç işlemin yapılacağını gösteriyoruz.
        $("#islemsayisi").html("Yapılacak işlem sayısı: " + arraytoplam);
        
        // Ajax isteklerinin başlaması için sayfa yüklendiğinde ilk istediği gönderiyoruz.
        ajax(array[baslama],islemgenisligi);

    });

Kısaca bu tarz işlemlerin mantığını anlatmak istedim. Kodları kendinize göre düzenleyebilirsiniz.

Önizleme

İndir

Sorularınızı yorumda belirtebilirsiniz.

Herkese iyi çalışmalar

Bir cevap yazın

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