如何使用 JavaScript 从 Windows 商店应用程序中的 Web 服务获取数据答案

【问题标题】：How to fetch data from web service in windows store apps using JavaScript如何使用 JavaScript 从 Windows 商店应用程序中的 Web 服务获取数据
【发布时间】：2013-06-17 04:30:39
【问题描述】：

我正在使用 javascript 开发一个 Windows 商店应用程序。我已经部署了 WCF 服务并且能够从 wcf 服务获取数据。我的问题是数据无法绑定到控件（这里我只有一个下拉框）。

<body onload="onLoad()">

 <select id="CbxArea" style="width: 200px" data-win-bind="textContent: AreaName">
    <option>Select Area</option>
</select>
<script type="text/javascript">
    function onLoad() {
        var xmlhttp;
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {                
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        //var Items = JSON.parse(xmlhttp.responseText);<--Frist Way
                var Items = window.toStaticHTML(xmlhttp.responseText);<--Second Way

                for(var i=0;i<Items.length;i++)
                {
                document.getElementById('CbxArea').innerHTML = '<option>' + Items+'</option>';
                }
            }
            else {
                document.getElementById('CbxArea').innerHTML = '<option>' + 'Error' + '</option>';
            }
        }
        xmlhttp.open("POST", "WCFService_url", true);
        xmlhttp.send();

    }
</script>
</body>

我曾尝试使用 json.parse 和 windows.toStaticHTML，但我无法将数据绑定到下拉列表。请为我提供任何解决方案，非常感谢。

【问题讨论】：

你在调用这个函数吗？此外，将innerHTML 设置为option 元素可能会导致旧版IE 出现问题。
@Teemu 我已经修改了一次代码检查，所以你能提供任何用于将数据绑定到控件的示例代码吗？
控制台有错误吗？您确定您的 Items 包含预期值吗？我很确定JSON 方式是要走的路。无论如何，如果数据正常，我假设Item 是一个数组？如果是，你应该使用'<option>' + Items[i] + '</option>'; 而不是你现在正在做的事情。
@Teemu 我已按照您的建议尝试过，但 Items.length 显示未定义并且来自循环，这是我遇到的唯一问题

标签： javascript data-binding windows-store-apps

【解决方案1】：

首先你需要像下面这样定义 WCF

 [OperationContract]
 [WebInvoke(UriTemplate = "/GetAreaNames", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Wrapped)]
 List<Area> GetAreaNames();

或用于多个参数

[OperationContract]
[WebInvoke(UriTemplate = "/ExcelDataInfo?area={area}&month={month}", RequestFormat =WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Wrapped)]
   void ExcelDataInfo(string area, string month);

在脚本页面之后

var xmlhttp;

if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var Items = JSON.parse(xmlhttp.responseText);
        var data = Items;
        var options;
        var length = Items.GetAreaNamesResult.length;
        for (var i = 0; i < length; i++) {
            $("#CbxArea").append("<option>" + Items.GetAreaNamesResult[i].AreaName + "</option>");//GetAreaNamesReult is your method and AreaName is variable
        }
        document.getElementById('CbxArea').selectedIndex = 1;
    }
    else {
        document.getElementById('CbxArea').innerHTML = '<option>Select Area</option>';
    }
}
xmlhttp.open("POST", "WCFService_url", true);
xmlhttp.send();

用于传递多个参数，如下所示

  var url = "http://localohost:8090/ExcelDataInfo?area=" + area + "&month=" + month;

【讨论】：

感谢您的回复。我会告诉您它是否有效