Question

请帮助我，我是json的ajax调用的新手，我可以从json获取数据，请从下面的代码中查看。

我们可以从本地服务器调用它的工作原理吗，

请给出清晰的图片

在Chrome控制台错误中：

XMLHttpRequest cannot load http://api.openweathermap.org/data/2.5/weather?q=%2C. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8012' is therefore not allowed access. The response had HTTP status code 401.

代码：

 <!DOCTYPE html>
    <html>
    <script src="http://localhost:8012/js/jquery.min.js"></script>
    <body>
    <div> city : <input type="text" id="txtCity"></div><br/>
    <div> Country : <input type="text" id="txtCountry"></div><br/>
    <input type="button" value="Get weather" id="getWeather">
    <div id="#resultDiv"></div>
    <script>
        $(document).ready(function() {
        $("#getWeather").click(function() {

            var requestData = $("#txtCity").val() + ',' + $("#txtCountry").val();
            var resultElement = $("#resultDiv");

                $.ajax({
                        url: 'http://api.openweathermap.org/data/2.5/weather',

                        method: 'get',
                        data: {
                            q: requestData
                        },
                        dataType: 'json',
                        success: function(data) {
                            resultElement.html('weather: ' + data.weather[0].main + '<br/>' +
                                'Description: ' + data.weather[0].description);
                    }

                });

    //alert("test");

        });

    });
    </script>
    </body>
    </html>

Answer 1

确保您发送请求的服务器可以接受您的请求。这是how CORS principle works的摘要。我在openweathermap.org/appid上读到你需要一个API密钥才能提出正确的请求。这是API调用的示例：http://api.openweathermap.org/data/2.5/forecast/city?id=524901&APPID=1111111111。我建议您在他们的网站上阅读如何获取API令牌并提出正确的请求。

Answer 2

您需要在请求中设置“Access-Control-Allow-Origin”标头。

我看到您使用dataType: 'json'尝试dataType: 'jsonp'并在$ .ajax中添加crossDomain: true就足够了。

如果您想设置请求标头，可以尝试类似

的内容

$.ajax({
    url: 'http://api.openweathermap.org/data/2.5/weather',
    beforeSend: function(xhr) {
        xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
    },
    method: 'get',
    data: { q: requestData},
    dataType: 'json',
    success: function(data) {
    resultElement.html('weather: ' + data.weather[0].main + '<br/>' + 'Description: ' + data.weather[0].description);}
});

来自json的JQuery Ajax调用收到错误

2 个答案: