Question

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

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

我已经通过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');
        }
     });
}

Answer 1

因为它是跨域请求。浏览器会因同源策略而阻止它。

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

此外，url似乎不支持jsonp。

还有另一种执行跨域ajax的方法。将您的服务器作为代理。即，您的服务器中将有一个方法使用http post从其他域获取数据..您将仅创建对服务器方法的调用。它将调用跨域并返回数据..

Answer 2

这里有两件事让我眼前一亮。

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

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

Answer 3

您正在尝试执行跨域AJAX请求，该请求被大多数浏览器的安全策略阻止。这是因为此类请求可用于在其他站点上执行操作，而无需用户注意。

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

Javascript无法与API通信

3 个答案: