Question

对于我的项目，我一直在尝试通过URL读取Json数据并将其显示在网页上。我只想使用Javascript。

我是新手。通过以下链接阅读JSON数据帮助我：

http://api.geonames.org/citiesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&lang=de&username=demo

我做了一些研究后尝试使用AJAX。还没有达成解决方案：

 $(document).ready(function () {

 $('#retrieve-resources').click(function () {
 var displayResources = $('#display-resources');

 displayResources.text('Loading data from JSON source...');

 $.ajax({
 type: "GET",
 url: "http://api.geonames.org/citiesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&lang=de&username=demo",
 success: function(result)
 {
 console.log(result);
 var output="<table><thead><tr><th>LNG</th><th>GEONAMEID</th><th>COUNTRYCODE</th></thead><tbody>";
 for (var i in result)
 {
 output+="<tr><td>" + result.geonames[i].lng + "</td><td>" + result.geonames[i].geonameId + "</td><td>" + result.geonames[i].countrycode + "</td></tr>";
 }
 output+="</tbody></table>";

 displayResources.html(output);
 $("table").addClass("table");
 }
 });

 });
});

Answer 1

使用XMLHttpRequest，例如：

function getText(){
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {

          document.getElementById("anchor").innerHTML = xhttp.responseText;
      }
  };
  xhttp.open("GET", "http://api.geonames.org/citiesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&lang=de&username=demo", true);
  xhttp.send();
}

getText()

您可以使用基于承诺的库，例如axios：

添加库<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

代码（基本示例）：

function getText(){
  var response=axios.get('http://api.geonames.org/citiesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&lang=de&username=demo')
  document.getElementById('anchor').innerHTML(response.data)
}

getText()

Answer 2

使用AJAX和外部资源时，请确保使用的是JSONP。

$.ajax({
    type: "GET",
    url: "http://api.geonames.org/citiesJSON?",
    dataType: "jsonp",
    data: { .. },
    success: function( response ) {
        console.log( response );
    }
});

An example from JQuery和SO Example。还有nice article on JSONP。

使用Javascript读取Json数据

2 个答案: