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

使用当前代码的混合内容警告。将URL从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上的console.log，并且它正常工作（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

想出来，事实上按钮是提交类型而不是按钮，因此它会重新提交包含虚假信息的页面。谢谢大家的帮助!!

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

3 个答案: