XML HTTP 请求在事件处理程序函数中不起作用

Question

我正在尝试使用简单的http请求加载天气数据。 实际请求设置正确，因为它在未调用时完美运行，而是在程序加载时运行它时完美运行。 但是，当我将代码放在从 onclick 或 onsubmit 事件调用的函数中时，readyStatus 直接敌对 4，状态代码保持在 0，仅此而已。 请求未执行。 关于在事件处理程序函数中设置 http 请求，我有什么不知道的吗？ 还是这项工作中存在我没有意识到的错误。相关代码直接在下面：

    <form class="form-inline">
    <div class="form-group">
        <label for="city">City: </label>
        <input type="city" class="form-control" id="city" placeholder="Enter City">
    </div>
    <div class="form-group">
        <label for="state">State: </label>
        <input type="state" class="form-control" id="state" placeholder="Enter State">
    </div>
    <button type="submit" class="btn btn-lg btn-info" id="submit" onclick="get_data()">Submit</button>
</form>

设置http请求的get_data函数如下：

function get_data(){
    request = new XMLHttpRequest();
    request.open("GET", "http://api.wunderground.com/api/31c6aa45ad6072ac/conditions/q/MA/Boston.json", true);
    request.onreadystatechange = function(){
        alert(request.readyState);
        alert(request.status);
        if (request.readyState == 4 && request.status == 200) {
            console.log(request.responseText);
        }
    }
    request.send();
}

Answer 1

当前代码的混合内容警告。 将网址从http更改为https可以解决这个问题。 检查此代码段，http 按钮和 https 按钮将网址从/更改为 https。 从 http 显示的问题与您报告的问题相匹配。

function get_data(s){
    request = new XMLHttpRequest();
    url = "http://api.wunderground.com/api/31c6aa45ad6072ac/conditions/q/MA/Boston.json";
    if (s) url = "https://api.wunderground.com/api/31c6aa45ad6072ac/conditions/q/MA/Boston.json";
    request.open("GET", url, true);
    request.onreadystatechange = function(){
        alert(request.readyState);
        alert(request.status);
        if (request.readyState == 4 && request.status == 200) {
            console.log(request.responseText);
        }
    }
    request.send();
}

<button onclick='get_data()'>http</button>
<button onclick='get_data(1)'>https</button>

Answer 2

我简化了按钮，并将警报更改为 jsbin 上的控制台.log(s(，并且它工作正常(IMO(：

function get_data() {
  console.log('running');
    request = new XMLHttpRequest();
    request.open("GET", "http://api.wunderground.com/api/31c6aa45ad6072ac/conditions/q/MA/Boston.json", true);
    request.onreadystatechange = function () {
        console.log(request.readyState);
        console.log(request.status);
        request.readyState == 4 &&
        request.status == 200 &&
        console.log(request.responseText);
    }
    request.send();
}

<button onclick="get_data()">Submit</button>

http://jsbin.com/cegifi/edit?html,js,console,output

Answer 3

想通了，事实是按钮的类型是提交而不是按钮，因此它会用虚假信息重新提交页面。 感谢大家的帮助！！