时间戳

首页 > 解决方案 > 当我想从一个 Restful Web 服务获取 JSON 时什么都没有发生

javascript - 当我想从一个 Restful Web 服务获取 JSON 时什么都没有发生

问题描述

我试图从 Restful 网络服务获取 JSON 文件。我写了一段代码，你可以在下面看到：

<!DOCTYPE html>
<html>
    <body>
        <h2>The XMLHttpRequest Object</h2>
        
        <button type="button" onclick="loadDoc()">Request data</button>
        
        <p id="demo"></p>

        <script>
            function loadDoc() {
                var xhttp = new XMLHttpRequest();
                xhttp.open("GET", "https://rest.soilgrids.org/query?lon=5.39&lat=51.57", false);
                xhttp.send();
                var r = JSON.parse(xhttp.responseText);
                var m = r.geometry.type;
                window.alert(m);
            }
        </script>
    </body>
</html>

对于这种情况，代码正在运行，没有任何异常。

但是当我尝试从不同的 URL 获取 JSON 文件时，它不起作用。我尝试的 URL 之一是“天气 api”，我修改了我的代码部分，如下所示：

<!DOCTYPE html>
<html>
    <body>
        <h2>The XMLHttpRequest Object</h2>
        
        <button type="button" onclick="loadDoc()">Request data</button>
        
        <p id="demo"></p>

        <script>
            function loadDoc() {
                var xhttp = new XMLHttpRequest();
                xhttp.open("GET", "https://samples.openweathermap.org/data/2.5/weather?id=2172797&appid=b6907d289e10d714a6e88b30761fae22", false);
                xhttp.send();
                var r = JSON.parse(xhttp.responseText);
                var m = r.coord.lon;
                window.alert(m);
            }
        </script>
    </body>
</html>

其他 URL 在我的 localhost 下（我的目标实际上是从我的本地 restful web 服务获取 JSON）。这个网址是“10.10.10.190:8080/ngram/webapi/user”。当我通过任何浏览器请求此 URL 时，我会得到静态 JSON 文件，即{"username":"xxxx","password":"xxxx"}.

我再次修改了这样的代码：

function loadDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", "http://10.10.10.190:8080/ngram/webapi/user", false);
    xhttp.send();
    var r = JSON.parse(xhttp.responseText);
    var m = r.username;
    window.alert(m);
}

但在这两种情况下，我都没有得到任何回应。我被困在那里。

编辑：当我查看开发人员工具时，我看到这样的错误： 在此处输入图像描述

顺便说一下，对于我的 Tomcat web.xml，我添加了以下几行：

<filter>
   <filter-name>CorsFilter</filter-name>
   <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filter>
<filter-mapping>
   <filter-name>CorsFilter</filter-name>
   <url-pattern>/*</url-pattern>
</filter-mapping>

标签： javascripthtmljsonapiweb-services

解决方案

推荐阅读