Визначення функції зворотного виклику jQuery ajax

Я хочу використовувати jQuery ajax для отримання даних із сервера.

Я хочу помістити визначення функції зворотного виклику за межі .ajax()блоку, як показано нижче. Тож чи потрібно мені оголошувати змінну, dataFromServerяк показано нижче, щоб я міг використовувати повернені дані із зворотного виклику успіху?

Я бачив, як більшість людей визначають зворотний виклик успіху всередині .ajax()блоку. Тож чи правильний наступний код, якщо я хочу визначити зворотний виклик успіху зовні?

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
}

Просто використовуйте:

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

successВластивість вимагає тільки посилання на функцію, і передає дані в якості параметра цієї функції.

Ви можете отримати доступ до своєї handleDataфункції таким чином через спосіб handleDataоголошення. JavaScript буде аналізувати ваш код для оголошень функцій перед його запуском, тому ви зможете використовувати функцію в коді, що перед фактичним оголошенням. Це відоме як підйом .

Однак це не враховується для функцій, оголошених таким чином:

var myfunction = function(){}

Вони доступні лише тоді, коли їх перекладач передав.

Дивіться це питання, щоб отримати додаткову інформацію про 2 способи оголошення функцій

"Новим" способом зробити це з jQuery 1.5 (січень 2011 р.) Є використання відкладених об'єктів замість передачі successзворотного виклику. Ви повинні повернути результат , $.ajaxа потім використовувати .done, і .failт.д. методи для додавання зворотних викликів поза $.ajaxвиклику .

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

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

getData().done(handleData);

Це відокремлює обробку зворотного виклику від обробки AJAX, дозволяє додавати декілька зворотних викликів, зворотних викликів тощо, і все це без необхідності модифікувати початкову getData()функцію. Відокремлення функціональності AJAX від набору дій, які потрібно виконати згодом, - це добре! .

Відкладені також дозволяють набагато легше синхронізувати безліч асинхронних подій, з якими ви не можете легко обійтися success:

Наприклад, я міг додати кілька зворотних викликів, обробник помилок і почекати, поки таймер закінчиться, перш ніж продовжувати:

// 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
});

Інші частини jQuery також використовують відкладені об'єкти - ви можете дуже легко синхронізувати анімацію jQuery з іншими асинхронними операціями.

Я не знаю, чому ви визначаєте параметр поза сценарієм. Це непотрібно. Ваша функція зворотного дзвінка буде автоматично викликана з даними повернення як параметром. Дуже можливо визначити зворотний виклик за межами sucess:тобто

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

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

буде викликана функція handleData і параметр, переданий їй функцією ajax.

Спробуйте переписати свій обробник успіху на:

success : handleData

Властивість успіху методу ajax вимагає лише посилання на функцію.

У вашій функції handleData ви можете взяти до 3 параметрів:

object data
string textStatus
jqXHR jqXHR

Я б написав:

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


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

Вам не потрібно оголошувати змінну. Функція успіху Ajax автоматично приймає до 3 параметрів:Function( Object data, String textStatus, jqXHR jqXHR )

через кілька годин пограйте з нею і ледь не затупіть. диво прийшло до мене, це спрацювало.

<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>

У вашому компоненті, тобто кутовому коді JS:

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