Question

我正在使用jQuery从2个单独的XML文件中使用XML数据，并使用该数据在单页PhoneGap应用程序中的页面上的无序列表中构建行项目。每个XML文件都包含行项目的一部分 - 描述性文本和mp4文件的href。我的代码似乎有效，但页面创建工作随机，有时显示结果，没有文本的行项目，或没有结果。根据我的阅读，我认为这是由于Ajax的异步性质。我想我正在使用jQuery Mobile中的pagebeforecreate，但这也可能是一个问题。有人可以提供推荐或解释我的结果吗？

<link href="jquery-mobile/jquery.mobile-1.4.3.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.4.3.min.js" type="text/javascript"></script>

<script type="text/javascript"> 
  $(document).on('pagebeforecreate', '#pageCE', function(event) {
    getXMLData("GetVideo", 3, "CE");
    getXMLData("GetDesc", 3, "CE");
  });

  function getXMLData(elementName, categoryId, eventType) {
    $.ajax({
      type: 'GET',
      url: "somewebsitename.com/..." + elementName + categoryId,
      dataType: "xml",
      async: false,
      success: function(xmlData) {
          parseXml(xmlData, elementName, eventType);
      }
    });
  }

  function parseXml(xmlData, elementName, eventType) {
    var i = 0;
    var targetOutputList = "#outputList" + eventType;
    if (elementName === "GetVideo") {
      $(xmlData).find('string').each(function() {
         $(targetOutputList).append('<li><a href="' + $(this).text() + '"><p id="outputLineItem' + i + '"></p></a></li>');
         i++;
      });
    }
    else if (elementName === "GetDesc") {
      var targetElement = "#outputLineItem" + i;
      $(xmlData).find('string').each(function() {
        $(targetElement).append($(this).text());
        i++;
        targetElement = "#outputLineItem" + i;
      });
    }   
  }
</script>

Answer 1

我对jquery-mobile并不熟悉，但看起来你的问题是由于第一个返回时调用从两个ajax调用中处理数据的函数引起的。如果GetDesc请求是第一个返回的请求，则没有要追加的目标元素。您的parseXml()函数每次调用时都会将i设置为0，这样就会导致一些问题。

我建议编写一个临时函数，将xmlData保存到变量中，检查其他xmlData是否已返回，只调用解析函数。

var getVideo = null;
var getDesc = null;

function checkData(xmlData, elementName, eventType)
{
    if(elementName === "GetVideo")
    {
        getVideo = new Object();
        getVideo.xmlData = xmlData;
        getVideo.elementName = elementName;
        getVideo.eventType = eventType;

        if(getDesc != null)
        {
            parseXml();
        }
    }
    else if(elementName === "GetDesc")
    {
        getDesc = new Object();
        getDesc.xmlData = xmlData;
        getDesc.elementName = elementName;
        getDesc.eventType = eventType;

        if(getVideo != null)
        {
            parseXml();
        }
    }
}

如果在ajax调用成功时调用此函数，则在开始解析之前，您将获得所有数据。

从2个文件中获取XML数据，并将结果合并到动态生成的订单项中

1 个答案: