jQuery: Ajax çağrı başarısından sonra verileri döndürür [duplicate]

bu sorunun zaten burada bir cevabı var:

böyle bir şey var, burada bana bir değer, bir dize veren bir komut dosyası için basit bir çağrı..

function testAjax() {
    $.ajax({
      url: "getvalue.php",  
      success: function(data) {
         return data; 
      }
   });
}

ama böyle bir şey ararsam

var output = testAjax(svar);  // output will be undefined...

yani değeri nasıl döndürebilirim? aşağıdaki kod da çalışmıyor gibi görünüyor...

function testAjax() {
    $.ajax({
      url: "getvalue.php",  
      success: function(data) {

      }
   });
   return data; 
}
396
tarihinde sordu Hakam Fostok 2011-03-15 22:08:26
kaynak

5 ответов

verileri işlevden döndürmenin tek yolu, zaman uyumsuz bir çağrı yerine senkron bir arama yapmak olacaktır, ancak yanıtı beklerken tarayıcıyı dondurur.

sonucu işleyen bir geri arama işlevinde geçirebilirsiniz:

function testAjax(handleData) {
  $.ajax({
    url:"getvalue.php",  
    success:function(data) {
      handleData(data); 
    }
  });
}

şöyle deyin:

testAjax(function(output){
  // here you use the output
});
// Note: the call won't wait for the result,
// so it will continue with the code here while waiting.
335
cevap Guffa 2011-03-15 22:13:39
kaynak

Not: Bu cevap Şubat 2010'da yazılmıştır.

altındaki 2015, 2016 ve 2017 güncellemeleri görmek.

zaman uyumsuz bir işlevden bir şey döndüremezsiniz. Ne sen-ebilmek dönmek bir promise . Bu soruların cevaplarında jquery'de nasıl çalıştığını açıkladım:

eğer neden verileri iade etmek istiyor musunuz ve daha sonra onunla ne yapmak istiyorsunuz, o zaman size nasıl yapılacağını daha spesifik bir cevap verebilir.

genellikle, yerine:

function testAjax() {
  $.ajax({
    url: "getvalue.php",  
    success: function(data) {
      return data; 
    }
  });
}

testAjax işlevinizi şu şekilde yazabilirsiniz:

function testAjax() {
  return $.ajax({
      url: "getvalue.php"
  });
}

o zaman sözünüzü şu şekilde alabilirsiniz:

var promise = testAjax();

sözünüzü saklayabilirsiniz, bunu geçirebilirsiniz, işlev çağrılarında bir argüman olarak kullanabilirsiniz ve işlevlerden geri dönebilirsiniz, ancak ''kullanın AJAX çağrısı tarafından döndürülen verileriniz, bunu şu şekilde yapmanız gerekir:

promise.success(function (data) {
  alert(data);
});

(basitleştirilmiş sözdizimi için aşağıdaki güncelleştirmelere bakın.)

verileriniz bu noktada mevcutsa, bu işlev hemen çağrılır. Değilse, veriler mevcut olduğu anda çağrılır.

tüm bunları yapmanın tüm noktası, verilerinizin $çağrısından hemen sonra mevcut olmamasıdır.zaman uyumsuz olduğu için ajax. Söz söylemek fonksiyonları için güzel bir özet: sana iade edebilirim veri çünkü henüz yok ve sizi engellemek ve beklemek istemiyorum, bu yüzden burada promise yerine ve daha sonra kullanabileceksiniz ya da sadece başkasına vermek ve onunla yapılabilir.

bu DEMO bakın .

güncelleme (2015)

şu anda (Mart 2015 itibariyle) jQuery Promises Promises/A+ile uyumlu değildir şartname diğer vaatler/A+ conformant uygulamaları ile çok iyi işbirliği yapmadıkları anlamına gelir .

ancak jQuery yaklaşan sürüm 3 vaat ediyor.x olacak ile uyumlu olacak' /A + şartname (teşekkürler Benjamin Gruenbaum işaret için dışarı). Şu anda (Mayıs 2015 itibariyle) jquery'nin kararlı sürümleri 1'dir.x ve 2.x.

yukarıda açıkladığım şey (Mart 2011'de) jQuery Ertelenmiş nesneleri zaman uyumsuz bir şey yapmak için zaman uyumlu kodda bir değer döndürerek elde edilebilir.

ancak senkron işlev çağrısı iki şey yapabilir - ya bir değer döndürebilir (eğer mümkünse) ya da bir istisna atabilir (eğer bir değer döndüremezse). Promises / A+, bu kullanım vakalarının her ikisini de istisna kadar güçlü bir şekilde ele alıyor senkron kodda işleme. JQuery sürümü, bir değeri döndürmenin eşdeğerini işler, ancak karmaşık özel durum işleme eşdeğeri biraz sorunludur.

özellikle, senkron kodda istisna işleme tüm noktası sadece güzel bir mesajla vazgeçmek değil, sorunu çözmeye ve yürütülmeye devam etmeye çalışmak ya da muhtemelen programın diğer bazı bölümleri için aynı veya farklı bir istisnayı yeniden düşünmeye çalışmak. Senkron olarak kod bir çağrı yığını var. Zaman uyumsuz çağrıda, Promises/a+ spesifikasyonu tarafından gerektiği gibi sözlerinizin içindeki gelişmiş özel durum işleme, hataları ve istisnaları karmaşık kullanım durumları için bile anlamlı bir şekilde işleyecek kod yazmanıza yardımcı olabilir.

jQuery ve diğer uygulamalar arasındaki farklar ve jQuery promises to a/a+ compliant dönüştürmek için nasıl bkz: jQuery gelen Kris Kowal ve ark. Q library wiki ve vaatleri HTML5 Rocks Jake Archibald tarafından JavaScript gelmesi.

gerçek bir söz nasıl iade edilir

yukarıdaki örneğimden gelen işlev:

function testAjax() {
  return $.ajax({
      url: "getvalue.php"
  });
}

bir jQuery olan bir jqXHR nesnesi döndürür Ertelenmiş nesne .

gerçek bir söz vermek için, yöntemini kullanarak değiştirebilirsiniz Q wiki :

function testAjax() {
  return Q($.ajax({
      url: "getvalue.php"
  }));
}

veya HTML5 'makalesinden yöntemini kullanarak:

function testAjax() {
  return Promise.resolve($.ajax({
      url: "getvalue.php"
  }));
}

bu Promise.resolve($.ajax(...)) , promise modül belgelerinde ve ES6 Promise.resolve() ile çalışmalıdır .

ES6 Promises kullanmak için bugün es6-promise modülünü kullanabilirsiniz polyfill() Jake Archibald tarafından.

çok doldurma olmadan ES6 vaatlerini nerede kullanabileceğinizi görmek için bkz.: kullanabilir miyim: vaat ediyor .

daha fazla bilgi için bkz.:

jQuery geleceği

jQuery gelecek sürümleri (3 başlayarak.Mayıs 2015 itibariyle x-current kararlı sürümleri 1'dir.x ve 2.x) ile uyumlu olacak vaatler/A+ şartname ( Benjamin Gruenbaum sayesinde yorumlarda işaret etmek için). " zaten kararlaştırdığımız iki değişiklik, Ertelenmiş uygulamamız için Promise/a+ uyumluluğudur [...]" ( jQuery 3.0 ve web geliştirme geleceği). Daha fazla bilgi için bkz: jQuery 3.0: sonraki nesiller Dave Methvin ve jQuery 3.0: Daha fazla birlikte çalışabilirlik, daha az Internet Explorer Paul Krill tarafından.

ilginç görüşmeler

güncelleme (2016)

ECMA-262, 6.Baskı, Bölüm 14.2 olarak adlandırılan ok fonksiyonları yukarıdaki örnekleri daha da basitleştirmek için kullanılabilir.

yerine jQuery API kullanarak:

promise.success(function (data) {
  alert(data);
});

yazabilirsiniz:

promise.success(data => alert(data));

veya A/A+ API'sini kullanma:

promise.then(data => alert(data));

ile her zaman ret işleyicileri kullanmayı unutmayın
promise.then(data => alert(data), error => alert(error));

veya

promise.then(data => alert(data)).catch(error => alert(error));

her zaman sözlerle ret işleyicileri kullanmalısınız neden görmek için bu cevabı görmek:

elbette bu örnekte şunları yapabilirsiniz sadece promise.then(alert) kullanın, çünkü alert yi geri arama ile aynı argümanlarla çağırıyorsunuz, ancak ok sözdizimi daha genel ve

gibi şeyler yazmanıza izin veriyor
promise.then(data => alert("x is " + data.x));

her tarayıcı bu sözdizimini henüz desteklemiyor, ancak kodunuzun hangi tarayıcıda çalışacağından emin olduğunuzda bazı durumlar var-örneğin Chrome uzantısı yazarken, Firefox eklentisi veya kullanarak bir masaüstü uygulaması. Elektron, NW.js veya AppJS (ayrıntılar için bu cevap bakınız).

ok fonksiyonlarının desteği için bkz.

güncelleme (2017)

daha yeni bir tane var sözdizimi şu anda bu kod yerine yeni bir await anahtar kelime ile async işlevleri denir:

functionReturningPromise()
    .then(data => console.log('Data:', data))
    .catch(error => console.log('Error:', error));

yazmanızı sağlar:

try {
    let data = await functionReturningPromise();
    console.log('Data:', data);
} catch (error) {
    console.log('Error:', error);
}

yalnızca async anahtar kelime ile oluşturulan bir işlevin içinde kullanabilirsiniz. Daha fazla bilgi için bkz:

tarayıcılarda destek için bkz.:

düğüm desteği için bkz.:

async ve await için yerel desteğiniz olmayan yerlerde Babel'i kullanabilirsiniz:

veya co veya Bluebird coroutines:

gibi bir jeneratör tabanlı yaklaşım biraz farklı sözdizimi ile

daha fazla bilgi

daha fazla ayrıntı için sözlerle ilgili diğer bazı sorular:

361
cevap rsp 2017-05-23 14:47:25
kaynak

false ve için zaman uyumsuz seçenek ajax çağrısı dışında döndürebilirsiniz.

function testAjax() {
    var result="";
    $.ajax({
      url:"getvalue.php",
      async: false,  
      success:function(data) {
         result = data; 
      }
   });
   return result;
}
161
cevap Ging3r 2014-03-10 11:40:03
kaynak

idk eğer siz çözdüyseniz, ancak bunu yapmanın başka bir yolunu öneriyorum ve işe yarıyor:)

    ServiceUtil = ig.Class.extend({
        base_url : 'someurl',

        sendRequest: function(request)
        {
            var url = this.base_url + request;
            var requestVar = new XMLHttpRequest();
            dataGet = false;

            $.ajax({
                url: url,
                async: false,
                type: "get",
                success: function(data){
                    ServiceUtil.objDataReturned = data;
                }
            });
            return ServiceUtil.objDataReturned;                
        }
    })

buradaki ana fikir, async: false ekleyerek, veriler alınana kadar her şeyi bekler. Sonra sınıfın statik bir değişkenine atarsınız ve her şey sihirli bir şekilde çalışır:)

-1
cevap user1509803 2013-03-01 12:30:33
kaynak

bkz. jQuery dokümanlar örneği: http://api.jquery.com/jQuery.ajax/ (yaklaşık 2/3 sayfa)

aşağıdaki kodu arıyor olabilirsiniz:

    $.ajax({
     url: 'ajax/test.html',
     success: function(data) {
     $('.result').html(data);
     alert('Load was performed.');
   }
});

aynı sayfa...aşağı in.

-11
cevap Techism 2013-07-22 14:11:40
kaynak

Diğer sorular javascript jquery ajax