0

我在这里提出的先前问题的答案给我带来了另一个问题，因为我对异步调用的了解越来越多，我仍然无法弄清楚如何完成（如上一个答案向我展示的那样）一个允许我存储的列表并使用来自选定列表项的数据。

$('#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 小提琴http://jsfiddle.net/amEge/3/

这段代码效果很好，可以让我完成我想要的，但首先我需要从 ajax 调用中填充 customerList。但是从“成功”功能来看，我似乎无法让代码正常工作。

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

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

当我在 ajax 函数中移动代码时，它不起作用。我只是想知道是否有人可以帮助我，也许可以告诉我如何从异步调用中处理这个问题？

非常感谢

4

2 回答 2

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

希望这会帮助你。如果你有问题在这里问我。

于 2013-03-05T04:45:47.917 回答
0

如果我错了，请纠正我，但我会冒险猜测您的“实时”代码看起来像这样：

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

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

于 2013-03-05T04:50:46.593 回答