jQuery ajax sukses definisi fungsi panggilan balik

90

Saya ingin menggunakan jQuery ajax untuk mengambil data dari server.

Saya ingin meletakkan definisi fungsi panggilan balik sukses di luar .ajax()blok seperti berikut. Jadi, apakah saya perlu mendeklarasikan variabel dataFromServerseperti berikut agar saya dapat menggunakan data yang dikembalikan dari callback sukses?

Saya telah melihat kebanyakan orang mendefinisikan sukses panggilan balik di dalam .ajax()blok. Jadi, apakah kode berikut benar jika saya ingin mendefinisikan sukses panggilan balik di luar?

var dataFromServer;  //declare the variable first

function getData() {
    $.ajax({
        url : 'example.com',
        type: 'GET',
        success : handleData(dataFromServer)
    })
}

function handleData(data) {
    alert(data);
    //do some stuff
}
tonga
sumber

Jawaban:

93

Gunakan saja:

function getData() {
    $.ajax({
        url : 'example.com',
        type: 'GET',
        success : handleData
    })
}

The successproperti hanya membutuhkan referensi ke fungsi, dan melewati data sebagai parameter untuk fungsi ini.

Anda dapat mengakses handleDatafungsi Anda seperti ini karena cara handleDatatersebut dideklarasikan. JavaScript akan mengurai kode Anda untuk deklarasi fungsi sebelum menjalankannya, sehingga Anda akan dapat menggunakan fungsi dalam kode sebelum deklarasi sebenarnya. Ini dikenal sebagai mengangkat .

Ini tidak dihitung untuk fungsi yang dideklarasikan seperti ini:

var myfunction = function(){}

Itu hanya tersedia jika penerjemah melewatinya.

Lihat pertanyaan ini untuk informasi lebih lanjut tentang 2 cara mendeklarasikan fungsi

Cerbrus
sumber
1
@ Alnitak, kapan deferred objectshal itu diperkenalkan? Saya belum pernah melihatnya sebelumnya. Selain itu, tampaknya sedikit berantakan, karena kode yang menentukan callback apa yang akan digunakan berada di lokasi yang berbeda dari panggilan AJAX yang sebenarnya.
Cerbrus
4
itu diperkenalkan di jQuery 1.5 dan itu jauh lebih tidak berantakan daripada menggunakan success:. Memisahkan callback dari AJAX adalah hal yang baik ! Lihat catatan yang baru saja saya tambahkan di akhir jawaban saya.
Alnitak
@ Alnitak, saya akan melihatnya. Mari kita lihat apakah saya dapat diyakinkan: P
Cerbrus
@Alnitak: Apakah objek yang ditangguhkan selalu lebih disukai daripada callback sukses? Terima kasih.
tonga
@tonga IMHO, ya, sangat disukai. Jika kode Anda telah menggunakan $.get()misalnya, tidak mungkin menambahkan error:penangan karena $.gettidak mendukungnya. Namun Anda dapat menambahkan a .failke hasil yang ditangguhkan dari $.get.
Alnitak
199

Cara "baru" untuk melakukan ini sejak jQuery 1.5 (Jan 2011) adalah menggunakan objek yang ditangguhkan alih-alih meneruskan successcallback. Anda harus mengembalikan hasil dari $.ajaxdan kemudian menggunakan metode .done, .failetc untuk menambahkan callback di luar $.ajaxpanggilan .

function getData() {
    return $.ajax({
        url : 'example.com',
        type: 'GET'
    });
}

function handleData(data /* , textStatus, jqXHR */ ) {
    alert(data);
    //do some stuff
}

getData().done(handleData);

Ini memisahkan penanganan callback dari penanganan AJAX, memungkinkan Anda untuk menambahkan beberapa callback, callback kegagalan, dll, semuanya tanpa perlu mengubah getData()fungsi aslinya . Memisahkan fungsionalitas AJAX dari serangkaian tindakan yang harus diselesaikan setelahnya adalah hal yang baik! .

Deferreds juga memungkinkan sinkronisasi yang lebih mudah untuk beberapa peristiwa asinkron, yang tidak dapat Anda lakukan dengan mudah success:

Misalnya, saya dapat menambahkan beberapa callback, penanganan error, dan menunggu timer berlalu sebelum melanjutkan:

// a trivial timer, just for demo purposes -
// it resolves itself after 5 seconds
var timer = $.Deferred();
setTimeout(timer.resolve, 5000);

// add a done handler _and_ an `error:` handler, even though `getData`
// didn't directly expose that functionality
var ajax = getData().done(handleData).fail(error);

$.when(timer, ajax).done(function() {
    // this won't be called until *both* the AJAX and the 5s timer have finished
});

ajax.done(function(data) {
    // you can add additional callbacks too, even if the AJAX call
    // already finished
});

Bagian lain dari jQuery juga menggunakan objek yang ditangguhkan - Anda dapat menyinkronkan animasi jQuery dengan operasi asinkron lainnya dengan sangat mudah.

Alnitak
sumber
1
@Cerbrus melihat contoh baru, dan kemudian pertimbangkan bagaimana Anda akan melakukannya tanpa objek yang ditangguhkan
Alnitak
@jbl deferred object is fantastic. Saya biasanya tidak menyukai jawaban apa pun yang mempromosikan penggunaan success:karena penangguhan hanya bekerja jauh lebih baik.
Alnitak
@Cerbrus itulah yang seharusnya ditafsirkan. Sarankan Anda cari di sini untuk user:6782 deferreduntuk banyak contoh lagi.
Alnitak
Bagaimana seseorang bisa memanfaatkan ini dengan acara pengiriman formulir?
haakym
Itu alertmeskipun ... Saya pribadi akan menggunakan console.log(data)atau jika itu sebuah array: console.table(data):)
Armstrongest
16

Saya tidak tahu mengapa Anda mendefinisikan parameter di luar skrip. Itu tidak perlu. Fungsi panggilan balik Anda akan dipanggil dengan data yang dikembalikan sebagai parameter secara otomatis. Sangat mungkin untuk menentukan callback Anda di luar sucess:ie

function getData() {
    $.ajax({
        url : 'example.com',
        type: 'GET',
        success : handleData
    })
}

function handleData(data) {
    alert(data);
    //do some stuff
}

fungsi handleData akan dipanggil dan parameter diteruskan ke sana oleh fungsi ajax.

BinaryTox1n
sumber
6

Coba tulis ulang penangan sukses Anda menjadi:

success : handleData

Properti sukses dari metode ajax hanya membutuhkan referensi ke sebuah fungsi.

Dalam fungsi handleData, Anda dapat menggunakan hingga 3 parameter:

object data
string textStatus
jqXHR jqXHR
Tidak terdefinisi
sumber
5

Saya akan menulis :

var handleData = function (data) {
    alert(data);
    //do some stuff
}


function getData() {
    $.ajax({
        url : 'example.com',
        type: 'GET',
        success : handleData
    })
}
jbl
sumber
15
Kode Anda tidak pernah benar-benar digunakan dataFromServersehingga baris pertama dapat dihapus.
Anthony Grist
2

Anda tidak perlu mendeklarasikan variabel. Fungsi sukses Ajax secara otomatis membutuhkan hingga 3 parameter:Function( Object data, String textStatus, jqXHR jqXHR )

Lukas Bijaminas
sumber
Entah bagaimana harus mencari beberapa saat untuk menemukan parameter default tersebut. Terima kasih!
payne
2

setelah beberapa jam bermain dengannya dan hampir menjadi membosankan. keajaiban datang padaku, itu berhasil.

<pre>


var listname = [];   


 $.ajax({
    url : wedding, // change to your local url, this not work with absolute url
    success: function (data) {
       callback(data);
    }
});

function callback(data) {
      $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.(jpe?g|png|gif)$/) ) { 
             //   $('#displayImage1').append( "<img src='" + wedding + val +"'>" );
                 listname.push(val);
            } 
        });
}

function myfunction() {

alert (listname);

}

</pre>
Võ Minh
sumber
1
Anda tidak perlu melakukan panggilan fungsi lain untuk sukses. Anda bisa langsung mengatakan success : callbackjquery akan memicu fungsi Anda dipanggil callbackdengan dataparameter di dalamnya.
Olgun Kaya
-1

Dalam komponen Anda yaitu kode JS sudut:

function getData(){
    window.location.href = 'http://localhost:1036/api/Employee/GetExcelData';
}
Shivani Jadhav
sumber