XML HTTP請求在事件處理函數中不起作用

我正嘗試使用簡單的http請求加載天氣數據。實際的請求是正確設置的，因爲它在未被調用時完美工作，而是程序在加載時運行它。但是，當我將代碼放入從onclick或onsubmit事件調用的函數中時，readyStatus直接與4對應，並且狀態代碼保持爲0，就是這樣。該請求沒有得到執行。有什麼我不知道在事件處理函數中設置http請求嗎？或者，我沒有意識到這項工作有錯誤。相關的代碼是正下方：XML 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>

而GET_DATA功能，其中，所述HTTP請求是成立，是以下：

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(); 
}

來源

2017-05-25 Matt

'readyState == 4'和'status == 200' –

你確定端點是可達的並且給json嗎？ –

代碼plz不是圖像。我沒有輸入該網址來測試json端點，但很高興復制/粘貼。 – James

我

簡化按鈕，並改變了警報CONSOLE.LOG （S）上jsbin，它的正常工作（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

來源

2017-05-25 17:20:37 mattgreen

任何想法爲什麼它會在Jsbin上爲你工作，但不是爲我本地？ @mattgreen – Matt

你有什麼錯誤嗎？試試你本地機器上的jsbin代碼。 – mattgreen

混合內容警告與當前代碼。將url從http更改爲https可解決此問題。檢查這個片段，http按鈕和https按鈕將URL從/更改爲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>

來源

2017-05-25 17:32:21 James

嗯，感謝您的建議，但仍似乎不執行請求。 – Matt

想通了，這是一個事實，即該按鈕是類型的提交，而不是按鈕，這樣它會重新提交虛假信息的頁面。感謝大家的幫助！

來源

2017-05-25 19:55:11 Matt

XML HTTP請求在事件處理函數中不起作用

回答

相關問題