Javascript不能与API通信

Javascript can't communicate with API

本文关键字：通信 API 不能 Javascript      更新时间：2023-09-26

我正在尝试编写一个webform，将从用户获取城市和州，将它们传递到API的url，然后将高和低输出到表单。

目前，如果我在IE中调试它，我在ajax中遇到错误，它显示一个警告，说失败404，但如果我在firefox中调试，如果我看firebug，我看到一个304响应。

我通过jsfiddle运行了ajax调用，它在警报中给出了正确的数据。所以我不认为问题是ajax本身。我已经添加了其余的javascript和我的HTML到jsfiddle，我运行它，当我点击我的提交按钮，我得到我的失败警报和jsfiddle说:"错误:请使用POST请求。"如果我这样做，它仍然做同样的事情，所以我迷路了。

如果能帮上忙就太好了。以下是我目前的代码。

HTML: 

<body>
    <form id="weatherForm">
        City:<input type="text" id="City" /><br />
        State:<input type="text" id="State" /><br />
        High:<p id="High"></p><br />
        Low:<p id="Low"></p><br />
        <button id="btnSubmit">Submit</button>
    </form>
 </body>
Javascript: 

$(document).ready(function () {
     $('#btnSubmit').on('click', findTemps)
});
function findTemps() {
    var city = $('#City').val();
    var state = $('#State').val();
    var fullUrl = 'http://api.wunderground.com/api/(Key here)/history_20140303/q/' + state + '/' + city + '.json';
    $.ajax({
        url: fullUrl,
        dataType: 'jsonp',
        type: 'POST',
        success: function (parsed_json) {
            var High = parsed_json.history.dailysummary[0].maxtempi;
            $('#High').val() = High;
            var Low = parsed_json.history.dailysummary[0].mintempi;
            $('#Low').val() = Low;
            alert("High in " + city + ", " + state + " is " + High);
            alert("Low in " + city + ", " + state + " is " + Low);
        },
        error: function (e) {
            alert('Failure ' + e.status);
        },
        done: function () {
            alert('done');
        }
     });
}

因为这是一个跨域请求。由于同源策略，浏览器将阻止它。

如果您想使用跨域ajax，应该在ajax中启用cors。服务器也应该启用它。

并且url看起来不支持jsonp。

还有另一种方法可以实现跨域ajax。将服务器设置为代理。也就是说，将有一个方法在你的服务器上，从其他域使用http post获取数据。您将只创建对服务器方法的调用。它将调用跨域并返回数据。

这里有两件事引起了我的注意。

1)您有可能遇到与CORS相关的跨域AJAX请求问题。

2) dataType属性应该是json而不是jsonp。

您正在尝试执行跨域AJAX请求，该请求被大多数浏览器的安全策略阻止。这是因为这样的请求可以在用户不注意的情况下在其他站点上执行操作。

解决这个问题的方法是在远程服务器上使用跨域资源共享(CORS)，这样它就允许资源共享到发生AJAX请求的源域。

相关文章：