2016-01-23 101 views
2

對於我的PhoneGap /科爾多瓦項目中,我想用下面的函數來處理所有的Ajax調用:jQuery的Ajax調用變量

function requestData(action, id) { 
    var data = { 
     user_id: localStorage.getItem('user_id') 
    }; 
    if(action == 'feed_load_feedings' || action == 'feed_add_load_menu_weight' || action == 'feed_add_load_menu_supps') { 
     data.id = id; 
    } 
    $.ajax({ 
     type: 'post', 
     url: 'http://_______.com/file.php?'+action, 
     async: false, 
     crossDomain: true, 
     data: data, 
     beforeSend: showLoader, 
     error: handleError, 
     success: handleSuccess 
    }); 
} 
function showLoader() { 
    console.log('showLoader fired') 
    $('body').prepend('<p id="loading">De gegevens worden geladen...</p>'); 
} 
function handleError(data) { 
    console.log('handleError fired') 
    $('#loading').remove(); 
    $('body').prepend('<p id="error">Fout tijdens het laden van de gegevens...</p>'); 
    return false; 
} 
function handleSuccess(data) { 
    console.log('handleSuccess fired') 
    $('#loading').remove(); 
    if(typeof data !== 'object') { 
     $('body').prepend('<p id="error">Fout in gegevens object...</p>'); 
     return false; 
    } 
    else if(data.length == 0) { 
     return 0; 
    } 
    else { 
     return data; 
    } 
} 

該處理的要求,也是錯誤處理。

如果一切正常,它應該返回數據。但是使用這個:

$(function() { 
    var herd = requestData('herd_load_herds'); 
    console.log(herd): 
}); 

在控制檯中給出了這樣的:

showLoader fired 
POST http://_______.com/file.php?feed_load_feedings 
handleSuccess fired 
undefined 

在POST請求,我可以看到數據被調用,沒關係。但是它不會被放入變量中。我認爲將async: false添加到我的ajax調用會阻止這種情況。我在監督什麼?

回答

3

The reason behind returning undefined is pretty obvious since requestData function doesn't return anything which means it indirectly returns undefined

ajax的流程是異步的,因此返回函數requestData中的任何內容都不起作用。您需要在函數調用中傳遞迴調函數,並在成功/錯誤處理程序中執行它。

$(function() { 
    requestData('herd_load_herds', 'someid', function(err, data){ 
     if(err){ 
     console.log("error"); 
     console.log(err); 
     }else{ 
     console.log("success"); 
     console.log(data): 
     } 
    });  
}); 
在AJAX

function requestData(action, id, callback) { 
    var data = { 
     user_id: localStorage.getItem('user_id') 
    }; 
    if(action == 'feed_load_feedings' || action == 'feed_add_load_menu_weight' || action == 'feed_add_load_menu_supps') { 
     data.id = id; 
    } 
    $.ajax({ 
      type: 'post', 
      url: 'http://_______.com/file.php?'+action, 
      async: false, 
      crossDomain: true, 
      data: data, 
      beforeSend: showLoader, 
      error: function(error){ 
       handleError(error, callback); 
      }, 
      success: function(data){ 
       handleSuccess(data, callback); 
      } 
     }); 
} 

在處理程序:

function handleSuccess(data, next) { 
    console.log('handleSuccess fired') 
    $('#loading').remove(); 
    if(typeof data !== 'object') { 
     $('body').prepend('<p id="error">Fout in gegevens object...</p>'); 
     next(undefined, false); 
    }else{  
     next(undefined, data); 
    } 
} 

function handleError(err, next) { 
    console.log('handleError fired') 
    $('#loading').remove(); 
    $('body').prepend('<p id="error">Fout tijdens het laden van de gegevens...</p>'); 
    next(err); 
} 
+0

感謝您的努力。我試過你的代碼,但它給了我一個錯誤:'TypeError:next不是一個函數'...怎麼回事? – LinkinTED

+0

現在試試..我編輯了我的答案 –

+0

是的,作品像一個魅力,謝謝! – LinkinTED

1

你的代碼工作得很好。沒有返回值的JavaScript函數默認返回undefined。您的功能requestData沒有return <someValue>聲明,因此返回默認undefined

如果要保存數據,則需要將其保存在success回調中。

我的建議是不要嘗試和async: false破解。只要做一切異步並適當迴應回調。

+0

確定'return'將在這裏工作? –

+0

這確實有用。但是,我怎樣才能將'success'回調中的數據導入到'herd'變量中呢? – LinkinTED

+0

「我的建議是不要試着用'async:false'來破解它。」我已閱讀過有關內容,並與你同在。但我想處理這些腳本中的所有ajax請求。所以我做了一些改變,我只需要改變一次。我怎麼能做到這一點? – LinkinTED