如何解决XML数据无法正确填充到jQuery collapsibleset的问题？

嘿，作为jQuery新手遇到这个异步问题太正常了，我来帮你理清楚问题根源并给出落地的解决办法！

核心问题：AJAX的异步特性 #

你当前的代码逻辑是：先发起AJAX请求，紧接着就执行创建collapsible的代码，但AJAX请求是异步操作——也就是说，后台还在加载XML数据的时候，后面生成<div>的代码已经跑完了，这时候status还没被赋值（甚至是undefined），自然没法填充到<p>标签里。哪怕用全局变量也没用，因为创建元素时全局变量还没被回调函数赋值，等赋值完成时元素早就创建好了。

具体解决步骤 #

把创建collapsible的代码完全移到AJAX的success回调函数内部，这样只有当XML数据成功获取、status被正确赋值后，才会生成并插入元素。另外还要修正两个小错误：

1. 修正XML里的标签拼写：<Bock1>应该改成<Block1>，不然jQuery的find('Block1')找不到对应元素
2. 修正AJAX的url参数：test.xml要加引号，变成'test.xml'，因为这是字符串路径

修正后的完整代码 #

test.xml

<Block1>
  <No>123</No>
  <RoomNo>10</RoomNo>
  <UpdateTime>1230</UpdateTime>
</Block1>

run.js

$.ajax({
  type: "GET",
  url: 'test.xml', // 修正：添加字符串引号
  dataType: "xml",
  success: function (xml) {
    $(xml).find('Block1').each(function () {
      var updateTime = $(this).find("UpdateTime").text();
      var no= $(this).find("No").text();
      var roomNo = $(this).find("RoomNo").text();
      var status = no + '<br/>' + roomNo + '<br/>' + updateTime;

      // 把创建collapsible的代码移到回调内部
      $('<div>')
        .attr({
          'data-role': 'collapsible',
          'data-collapsed': 'false',
          'data-mini': 'true'
        })
        .html('<h4>' + item_name + '</h4><p>' + status + '</p>')
        .appendTo(collapsibleset);
    });
  }
});

额外提示 #

如果你的XML里有多个<Block1>元素，上面的代码会为每个元素生成一个独立的collapsible，这应该符合你的需求。如果需要把所有status合并到一个collapsible里，可以先在回调外定义空数组，循环时把每个statuspush进去，最后用数组拼接后的内容创建元素。

另外要确认item_name和collapsibleset这两个变量在回调内部是可访问的（比如是全局变量，或者在外部作用域定义），不然会出现未定义的问题哦！

内容的提问来源于stack exchange，提问作者Ann Yang