返回或結構代碼，所以來自ajax調用的數據可以用在動態填充列表中

Question

從以前的問題回答我在這裏問了一個問題給我帶來了另一個問題，因爲我越來越多地瞭解異步調用，我仍然無法確定如何完成（如前面的答案所示）列表允許我存儲和使用選定列表項目中的數據。

$('#home').live('pageshow', function(){ 
    // creating object 
    var customerList = JSON.parse('{"customerInAccount":[{"customer_name":"Jane Doe","auto_id":"21"},{"customer_name":"Jack Black","auto_id":"22"}]}'); 

    // creating html string 
    var listString = '<ul data-role="listview" id="customerList">'; 

    // running a loop 
    $.each(customerList.customerInAccount, function(index,value){ 
    listString += '<li><a href="#" data-cusid='+this.auto_id+'>'+this.customer_name+'</a></li>'; 
    }); 
    listString +='</ul>'; 

    console.log(customerList); 

    //appending to the div 
    $('#CustomerListDiv').html(listString); 

    // refreshing the list to apply styles 
    $('#CustomerListDiv ul').listview(); 

    // getting the customer id on the click 
    $('#customerList a').bind('click',function(){ 
    var customerID = $(this).data('cusid'); 
    alert(customerID); 
    }); 
}); 

與爵士小提琴http://jsfiddle.net/amEge/3/

此代碼的工作出色，可以讓我實現我想要什麼，但我的拳頭需要從Ajax調用填充customerList。但從「成功」功能，我似乎無法讓代碼工作。

$.post(postTo,{id:idVar} , function(data) { 

    customerList = data; 
    //alert(customerList); 
}) 

當我將代碼移到ajax函數中時，它不起作用。我只是想知道是否有人可以幫助我，也許告訴我如何從異步調用處理這個問題？

很多謝謝

Answer 1

你需要改變你的頁面如下。

// I assume this is your dot net web service url 
var webServiceURL = 'customer.asmx/GetCustomer'; 

// here home is your page's ID 
$('#home').live('pageshow', function(){ 
    getCustomerList(); 

}); 

function getCustomerList(){ 
    param=JSON.strigify({id:'2'}); 
    callWebService(param, webServiceURL, onGetCustListSuccess, onGetCustListFailed) 
} 

function onGetCustListFailed(){ 
    alert("service request failed"); 
} 

function onGetCustListSuccess(data, status){ 
    // creating object 
    // replace previous line with below 
    // var customerList = JSON.parse('{"customerInAccount":[{"customer_name":"Jane Doe","auto_id":"21"},{"customer_name":"Jack Black","auto_id":"22"}]}'); 
    var customerList = JSON.parse(data.d); 

    // creating html string 
    var listString = '<ul data-role="listview" id="customerList">'; 

    // running a loop 
    $.each(customerList.customerInAccount, function(index,value){ 
    listString += '<li><a href="#" data-cusid='+this.auto_id+'>'+this.customer_name+'</a></li>'; 
    }); 
    listString +='</ul>'; 

    console.log(customerList); 

    //appending to the div 
    $('#CustomerListDiv').html(listString); 

    // refreshing the list to apply styles 
    $('#CustomerListDiv ul').listview(); 

    // getting the customer id on the click 
    $('#customerList a').bind('click',function(){ 
    var customerID = $(this).data('cusid'); 
    alert(customerID); 
    }); 
} 

function callWebService(param,url,successFunc,errorFunc){ 
    if(errorFunc=='undefined'){ 
     errorFunc=OnDataError; 
    } 
    $.ajax({    
      type: "POST", 
      url: url, 
      data: param, 
      contentType:"application/json; charset=utf-8", 
      dataType: "json", 
      success: successFunc, 
      error: errorFunc, 
      beforeSend:function(){$.mobile.loading('show');}, 
      complete:function(){$.mobile.loading('hide');} 
    }); 
} 

希望這會幫助你。如果你有問題在這裏問我。

Answer 2

糾正我，如果我錯了，但我會大膽地猜測你的「活」的代碼看起來是這樣的：

$('#home').live('pageshow', function(){ 
    // creating object 
    var customerList; 

    $.post(postTo, {id:idVar}, function(data) { 
     customerList = data; 
     //alert(customerList); 
    }); 

    // creating html string 
    var listString = '<ul data-role="listview" id="customerList">'; 

    // and all the rest... 

如果是這樣，那麼你的問題是，這取決於是代碼您的customerList變量被填充（「所有剩下的......」）立即運行，而不是等待HTTP請求的響應從Web服務器返回。 $ .post（）不會等待（或者像我們在計算機軟件編程遊戲中所說的那樣「阻止」），而HTTP事務則進入Web服務器並返回。相反，其餘的代碼會立即運行，然後當響應返回到瀏覽器時，JavaScript引擎忠實地執行您的成功函數（或「關閉」，就像我們嗯嗯）。

所以你想要做的就是把所有這些其他代碼（依賴於customerList的東西）放到一個單獨的函數中，然後在你的成功關閉中調用該函數。你甚至不需要你的customerList變量;你可以將新的響應數據作爲參數傳遞給你的新函數。