我正在尝试编写一个网络表单,该表单将从用户那里获取城市和州,将它们传递到 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 从其他域获取数据。您将仅创建对服务器方法的调用。它将进行跨域调用并返回数据..
关于JavaScript 无法与 API 通信,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22304117/