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

使用js fiddle 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请求的响应从网络服务器。当HTTP事务进入Web服务器并返回时，$ .post（）不会等待（或者像我们在计算机软件编程游戏中所说的那样“阻塞”）。相反，其余的代码会立即运行，然后，当该响应返回到浏览器时，JavaScript引擎会尽职尽责地执行您的成功函数（或“封闭”，因为我们嗯嗯嗯）。

所以你要做的就是将所有其他代码（依赖于customerList的东西）放入一个单独的函数中，然后在成功闭包中调用该函数。你甚至不需要你的customerList变量;您可以将新的响应数据作为参数传递给新函数。

返回或结构代码，以便来自ajax调用的数据可用于动态填充的列表中

2 个答案: