将 JSON 响应中的值解析并显示到 HTML

Question

我试图根据从 HTML 的地理定位 API 获得的坐标找出当前城市。在这里我硬编码了坐标但是我无法解析和获取当前城市。

我用来获取城市名称的API是Nominatim。我不确定代码哪里出了问题。

<html>
<body>
    <!--<div><button name="locationdiv" onclick="getLocation()">Get Location</button> </div>-->
    <div><button name="citydiv" onclick="getCity()">Current City</button> </div>
</body>    
<script>


    function getCity(){

        const url = "https://nominatim.openstreetmap.org/reverse?format=json&lat=12.93&lon=80.17&zoom=18&addressdetails=1";
        const req = new XMLHttpRequest();
        req.responseType = 'json';
        req.open("GET", url, true);
        req.send();
        var jsonResponse = JSON.parse(req.responseText);
        var newElement2  = document.createElement("div");
        newElement2.innerHTML = Http.responseJSON.address.country;
        document.body.appendChild(newElement2);}

</script>

Answer 1

您似乎不熟悉 AJAX 调用的异步性质。您不能只是 post 一个 AJAX 调用，然后期望 XMLHttpRequest 对象拥有所有内容。您需要为事件 onreadystatechange 定义一个回调函数，所有操作都应在该回调函数中发生。

const url =
  "https://nominatim.openstreetmap.org/reverse?format=json&lat=12.93&lon=80.17&zoom=18&addressdetails=1";
const req = new XMLHttpRequest();
req.responseType = "json";
req.open("GET", url, true);
req.send();
req.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var jsonResponse = this.response;
    var newElement2 = document.createElement("div");
    newElement2.innerHTML = jsonResponse.address.country;
    document.body.appendChild(newElement2);
  }
}

顺便说一句：'AJAX' 调用比旧的 XMLHttpRequest 有更现代的方法，即 fetch()

将 JSON 响应中的值解析并显示到 HTML

Parsing and Displaying the values from JSON response into HTML

javascript

json

geolocation

openstreetmap

nominatim