javascript async woes

這是一個新手JavaScript問題，但我不太清楚如何谷歌尋求幫助，因爲我不知道如何以簡單的方式描述問題。javascript async woes

我有一個很大的，有點複雜的JSON，我需要操作，這樣我就可以重新塑形JSON，以獲得僅有的國家，城市和銷售清單。

JSON本身對我來說不是問題，這是我一旦收到它就想做的事情。基本上，我想從一個大型的JSON中創建3個獨立的對象/數組，並且在$.ajax調用的外部使用這3個獨立的對象/數組。是的，我認爲我可以在$.ajax成功回調中完成所有這些工作，但我寧願將其他所有JSON處理都完成。我僞的JavaScript看起來是這樣的：

var model = { 
    countries: [], 
    cities: [], 
    sales: [], 
    set: function(data) { 
    //manipulate data here so that model.countries, model.cities, model.sales are populated 
    }  
}; 


$.ajax({ 
    url: 'example.com/sample.json', 
    success: function(data) { 
    model.set(data); //is this the right way to do this? 
    } 
}); 

$('#countries').html(model.countries); 
$('#cities').html(model.cities); 
$('#sales').html(model.sales);

但由於JavaScript的異步執行，因爲JSON一直還沒有收到最後3行總是空白。

所以我想我的問題是，我如何將我收到的JSON的結果綁定到$.ajax範圍之外的變量，以便我可以在頁面上的任何位置使用它？

來源

2012-11-12 Kevin

_「我能做到這一切的$就成功回調的內部的，但我寧願所有的JSON處理做過的工作。」 _ - 是把加工代碼另一個函數，你來自成功回調的呼叫太多，就像直接在回調中進行處理一樣？（作爲一個挑剔的問題：請注意，當您訪問Ajax成功回調函數的'data'參數時，它不再是JSON，它已被jQuery解析（生成一個對象）。 – nnnnnn

是的。我想我想在$ .ajax調用完成後能夠訪問數據。它有點讓我困擾，我需要處理$ .ajax範圍內的數據，但也許沒有其他解決方案？ – Kevin

這不是範圍問題，而是數據何時可用的問題。因爲ajax調用是異步的，所以'$ .ajax（）'函數調用會立即返回，但直到基礎Ajax請求和響應完成之後才調用成功回調時，數據纔可用。它有時可能很不方便，但這就是異步應用的方式。 – nnnnnn

簡單的解決辦法是這樣的：

$.ajax({ 
    url: 'example.com/sample.json', 
    success: function(data) { 
    model.set(data); 
    $('#countries').html(model.countries); 
    $('#cities').html(model.cities); 
    $('#sales').html(model.sales); 
    } 
});

如果你想要更多的東西frameworky，那麼你可以看一個像Backbone.js。

來源

2012-11-12 04:25:06

只要把這3行放在success的回調函數中（你也可以把它分成一個函數）並跳過model人口。

有框架允許您將DOM元素綁定到JS對象及其數據，在這種情況下，它可能是矯枉過正。

來源

2012-11-12 04:22:04 ZenMaster

在AJAX成功回調中填充您的HTML（即更新您的視圖）。即

function updateView() { 
    $('#countries').html(model.countries); 
    $('#cities').html(model.cities); 
    $('#sales').html(model.sales); 
} 

$.ajax({ 
    url: 'example.com/sample.json', 
    success: function(data) { 
    model.set(data); //is this the right way to do this? 
    updateView(); 
    } 
});

來源

2012-11-12 04:26:47 Peter

javascript async woes

回答

相關問題