JavaScript 无法与 API 通信

标签 javascript jquery html api

我正在尝试编写一个网络表单,该表单将从用户那里获取城市和州,将它们传递到 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/

相关文章:

javascript - jQuery - 选择属性名称(而不是值)以...开头的所有元素?

javascript - 图像未显示在我的 mvc 应用程序中

javascript - 使用JQuery/javascript创建动态图像: what am I doing wrong?

html - 文本没有元素

html - 如何将文本放在交叉渐变 slider 上?

javascript - html Canvas 中的蒙版图像

javascript - 按钮在 Chrome 中的位置不正确

javascript - Material.io - 某些 Material 设计库的组件未正确呈现

javascript - 像 iframe 一样绝对定位

javascript - 代码在 jsFiddle 上运行良好但在本地系统上运行不正常