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

我在这里提出的一个问题的答案给我带来了另一个问题，因为我正在学习越来越多的异步调用，我仍然不知道如何完成（正如前面的答案所示）一个列表，该列表允许我存储和使用所选列表项中的数据

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

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

---

非常感谢

您需要按以下方式更改页面

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

//我假设这是您的点网web服务url
var webServiceURL='customer.asmx/GetCustomer'；
//主页是您的页面ID
$（'#home'）.live（'pageshow'，function（））{
getCustomerList（）；
});
函数getCustomerList（）{
param=JSON.strigify（{id:'2'}）；
callWebService（参数、webServiceURL、onGetCustListSuccess、onGetCustListFailed）
}
函数onGetCustListFailed（）{
警报（“服务请求失败”）；
}
函数onGetCustListSuccess（数据、状态）{
//创建对象
//将前一行替换为以下内容
//var customerList=JSON.parse（“{”customerAccount“：[{”customer_name:“Jane Doe”，“auto_id:“21”}，{”customer_name:“Jack Black”，“auto_id:“22”}]）；
var customerList=JSON.parse（data.d）；
//创建html字符串
var listString='
'；
//运行循环
$.each（customerList.customerAccount，函数（索引，值）{
listString+='
'；
});
listString+='
'；
console.log（customerList）；
//附加到div
$（'#CustomerListDiv'）.html（列表字符串）；
//刷新列表以应用样式
$（'#CustomerListDiv ul'）.listview（）；
//在单击按钮上获取客户id
$（'#customerList a'）.bind（'click'，function（）{
var customerID=$（this）.data（'cusid'）；
警报（customerID）；
});
}
函数callWebService（参数、url、successFunc、errorFunc）{
if（errorFunc==“未定义”）{
errorFunc=OnDataError；
} 
$.ajax（{
类型：“POST”，
url:url，
数据：param，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：successFunc，
错误：errorFunc，
beforeSend:function（）{$.mobile.loading（'show'）；}，
完成：函数（）{$.mobile.loading（'hide'）；}
});
}

---

希望这能帮到你。如果您有问题，请在此处询问。

如果我错了，请纠正我，但我会冒险猜测您的“实时”代码如下所示：

$('#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...

$（'#home'）.live（'pageshow'，function（））{
//创建对象
var客户列表；
$.post（postTo，{id:idVar}，函数（数据）{
客户列表=数据；
//警报（客户列表）；
});
//创建html字符串
var listString='
'；
//还有其他的。。。

如果是这样的话，那么您的问题是，取决于所填充的customerList变量（“所有其他…”）的代码会立即运行，而不是等待HTTP请求的响应从Web服务器返回当HTTP事务到达Web服务器并返回时，您的其余代码会立即运行，然后，当响应返回到浏览器时，JavaScript引擎会尽职尽责地执行您的成功函数（或者我们所说的“closure”）

---

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

您是否可以添加更多有关正在调用的数据源、响应的格式、响应的内容类型的信息正在设置响应等。请详细说明当您说它不起作用时，会发生什么？我看不出它失败的原因。您是否收到任何错误消息？在AJAX成功处理程序中，当您尝试发出警报时，会发生什么，例如customerList[0][0]？请参阅firebug中的

post

响应，并在

find

的帮助下提取所需内容…好的，它仍然不起作用，我在您的整个代码中发出警报只是为了了解执行顺序。但我没有进入callWebService功能，也不了解“successFunc”代码的一部分。如果需要更多帮助，我将不胜感激，我正在使用您给我的上一个答案中的基本代码布局。live功能运行完美，因此我相信我的页面结构正确。同样感谢您的答案，我从您如何构造代码中学到了很多。谢谢请检查执行器在哪一点n停止。简单的方法是放置

警报（'test1'）

在每个函数中。同时按下

f12

并查看浏览器控制台中记录的任何错误。我通过函数发出警报，并注意到param变量导致了错误，但我不认为这是问题所在，因为我只是在php脚本中使用固定变量进行调试。现在我得到了一个“意外令牌u”在代码的JSON.parse（data.d）行上。还有为什么它现在被命名为“data.d”？将

data.d

更改为

data

。也将您对控制台的响应记录在成功消息中，作为

console.log（data）

，并告诉我您得到了什么。这可能会解决问题'Object{customerInAccount:Array[2]}customerInAccount:Array[2]0:Object 1:Object length: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...