La requête HTTP XML ne fonctionne pas dans les fonctions du gestionnaire d'événements

Question

J'essaie de charger des données météorologiques à l'aide d'une simple requête HTTP. La requête actuelle est correctement configurée, car elle fonctionne parfaitement lorsqu'elle n'est pas appelée, mais lorsque le programme l'exécute simplement lors du chargement. Cependant, lorsque je place le code dans une fonction appelée depuis un événement onclick ou onsubmit, le readyStatus est directement affecté à 4 et le code d'état reste à 0, et c'est tout. La demande n'est pas exécutée. Y at-il quelque chose que je ne sais pas sur la mise en place d'une requête http dans une fonction de gestionnaire d'événements? Ou y at-il une erreur dans ce travail que je n'ai pas réalisé. Le code correspondant est directement ci-dessous:

<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> 

Et la fonction get_data, où la demande http est mis en place, est ci-dessous:

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

I simplifié le bouton, et changé les alertes console.log (s) sur jsbin, et il fonctionne correctement (OMI):

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 2

Avertissement de contenu mixte avec le code actuel. Changer l'URL de http à https le résout. Vérifiez cet extrait, le bouton http et le bouton https changer l'URL de/à https. Le problème présenté par http correspond à votre problème signalé.

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 3

figured it out, il a été le fait que le bouton était de type soumettre et non le bouton, afin qu'il soumettrait à nouveau la page avec des informations fausses. Merci pour l'aide de tout le monde !!