仅使用JavaScript和jQuery从json web服务获取数据

我已经下载了使用此URL的示例应用程序http://www.zachhunter.com/2010/04/json-objects-to-html-table/。这是可以正常使用的部分是：仅使用JavaScript和jQuery从json web服务获取数据

<script src="scripts/jquery-1.3.2.debug.js" type="text/javascript"></script> 
<script src="scripts/json.htmTable.js" type="text/javascript"></script> 
<script src="scripts/json.debug.js" type="text/javascript"></script> 
<link href="styles/default.css" rel="stylesheet" type="text/css" /> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     /* ASSOC ARRAY - Detail View */ 
     var json1 = { "d": [{ "__type": "acation", "id": "001", "date": "2010-06-01 
         00:00:00", "iod": "1", "mer": "ABC ", "tity": "6", "ot": 
         "12,500", "nt": "75000", "ou": "A", "rep": "we", "perc": "34", 
         "ine": "one", "year": "2009", "ct": "ABC ", "alet": "90000", 
         "pro": "1500", "stats": "ive", "crnt": "5000", "ter": "AA"}] } 

     /* NORMAL ARRAY - Detail View */ 
     var json2 = { "d": [{ __type: "acation", id: "001", date: "2010-06-01 
         00:00:00", iod: "1", mer: "ABC ", tity: "6", ot: "12,500", nt: 
         "75000", ou: "A", rep: "we", perc: "34", ine: "one", year: 
         "2009", ct: "ABC ", alet: "90000", pro: "1500", stats: "ive", 
         crnt: "5000", ter: "AA"}] } 

     /* NORMAL ARRAY - Table View */ 
     var json3 = { "d": "[{\"Id\":1,\"UserName\":\"Sam Smith\"},{\"Id\":2,\"UserName 
         \":\"Fred Frankly\"},{\"Id\":1,\"UserName\":\"Zachary 
         Zupers\"}]" } 

     $('#DynamicGridLoading').hide(); 

     delete json1.d[0]["__type"]; 
     delete json2.d[0]["__type"]; 

     $('#DynamicGrid').append(CreateDetailView(json1.d, "lightPro", true)).fadeIn(); 
     $('#DynamicGrid').append(CreateDetailView(json2.d, "lightPro", true)).fadeIn(); 
     $('#DynamicGrid').append(CreateTableView(json3.d, "lightPro", true)).fadeIn(); 

    }); 
</script> 

</head> 
<body> 
    <form id="form1" > 
    <div id="DynamicGrid" > 
    <div id="DynamicGridLoading" > 
     <img src="images/loading.gif" /><span> Loading Data... </span> 
    </div> 
    </div> 
    <br /> 
    <a href="jsonservice_api.html">Json web service</a> 
    </form> 
</body>

其工作正常，但是当我尝试使用免费的Web服务的JSON像这样的天气API：http://api.worldweatheronline.com/free/v1/weather.ashx?q=dehradun&format=json&num_of_days=5&key=3tkb34yntmwqn23uambzdvgm通过以下方式，我得到什么。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $.ajax({ 
      type: "GET", 
      url: "http://api.worldweatheronline.com/free/v1/weather.ashx?q=dehradun& 
        format=json&num_of_days=5&key=3tkb34yntmwqn23uambzdvgm", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      data: "{}", 
      success: function (res) { 
       $('#DynamicGrid').append(CreateTableView1(res, "CoolTableTheme", 
            true)).fadeIn(); 
      } 
     }); 
    }); 

</script>

为CreateTableView的定义是在js文件的一个包括在具有定义脚本标记，如下所示：

function CreateTableView(objArray, theme, enableHeader) { 
    // set optional theme parameter 
    if (theme === undefined) { 
     theme = 'mediumTable'; //default theme 
    } 

    if (enableHeader === undefined) { 
     enableHeader = true; //default enable headers 
    } 

    var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray; 

    var str = '<table class="' + theme + '">'; 

    // table head 
    if (enableHeader) { 
     str += '<thead><tr>'; 
     for (var index in array[0]) { 
      str += '<th scope="col">' + index + '</th>'; 
     } 
     str += '</tr></thead>'; 
    } 

    // table body 
    str += '<tbody>'; 
    for (var i = 0; i < array.length; i++) { 
     str += (i % 2 == 0) ? '<tr class="alt">' : '<tr>'; 
     for (var index in array[i]) { 
      str += '<td>' + array[i][index] + '</td>'; 
     } 
     str += '</tr>'; 
    } 
    str += '</tbody>' 
    str += '</table>'; 
    return str;

}

请帮我迫切的感谢....提前。

来源

2013-07-11 Ajendra Prasad

怎么样试试吧weather API？
这里是一个工作和简单的jQuery示例：http://jsbin.com/isukam/1

检查weather resource了解更多信息。

披露：我拥有这个API。

来源

2013-07-11 13:07:49 beddamadre

这可能是cross domain/same origin policy问题。网页浏览器会阻止来自其他网域的内容（所以如果你在本地主机或www.yoursite.com上，并且你打电话给http://api.worldweatheronline.com上的网络服务，它将被阻止）。

要确认这种情况，您可以打开您的Web浏览器的开发人员工具，并且控制台或网络区域中可能会出现有关跨域调用的错误消息。（要打开开发人员工具，请在Chrome中使用Ctrl-Shift-I，在Firefox中使用Ctrl-Shift-K，在IE中使用F12）。

如果服务支持它们，您可以使用JSONP或CORS。否则，您可以在您自己的项目上创建一个服务，作为代理，在另一个域上调用该服务，然后返回结果。（跨域限制只是一个浏览器安全功能，所以你可以从服务器端的ASP.NET，PHP，Java e.t.c服务中调用服务而没有问题）。

来源

2013-07-11 13:15:10

嗨@Neil感谢您的答复是否有任何方式来调用服务，而无需使用任何本机代码，我正在使用phonegap创建一个简单的混合移动应用程序。按照您的建议，我在Firefox的开发人员工具中提供了以下消息。未声明HTML文档的字符编码。如果文档包含US-ASCII范围之外的字符，则该文档将在某些浏览器配置中呈现乱码文本。页面的字符编码必须在文档或传输协议中声明。 –

仅使用JavaScript和jQuery从json web服务获取数据

回答

相关问题