Представление формы JQuery не работает с API

Question

Я пытаюсь получить дату из представления формы для использования в запросе API SmartyStreet. Это не выводит ответ API.

HTML:

<div class="form-style-5"> 
     <form id="myForm"> 
      <fieldset> 
       <legend><span class="number">1</span> Input Address</legend> 
       <input type="text" id="street" name="street" placeholder="Street"> 
       <input type="text" id="city" name="city" placeholder="City"> 
       <input type="text" id="state" name="state" placeholder="State"> 
       <input type="submit" value="Submit" /> 
      </fieldset> 
     </form> 
     <fieldset> 
      <legend><span class="number">2</span> Results</legend> 
      <div id='resultBox'> 
      </div> 
     </fieldset> 
    </div> 

JS:

AUTH_ID = "123456789"; 
    AUTH_TOKEN = "123456789" 

    $("myForm").submit(function(event) { 
     street = $("#street").val() 
     city = $("#city").val() 
     state = $("#state").val() 

     var xhr = new XMLHttpRequest(); 
     xhr.open("get", "https://us-street.api.smartystreets.com/street-address?street=" + street + "&auth-id=" + AUTH_ID + "&auth-token=" + AUTH_TOKEN, true); 
     xhr.send(); 
     var addresses = JSON.parse(xhr.responseText); 
     console.log('Hello') 

     $("#resultBox").text(addresses).show(); 
     event.preventDefault(); 
    }); 

любая помощь, я просто хочу знать, почему он не работает, и если есть лучший путь. Спасибо

Answer 1

Свойство onreadystatechange можно использовать для контроля состояния вашего запроса, когда состояние изменяет вызваемую функцию, когда статус запроса равен 4 (завершено), а код состояния ответа - 200 (OK), затем вы изменяете текст адреса, используя возвращенные данные json из свойства текста ответа. Надеюсь, это поможет.

$("myForm").submit(function(event) { 
    event.preventDefault(); 
    street = $("#street").val() 
    city = $("#city").val() 
    state = $("#state").val() 

    var xhr = new XMLHttpRequest(); 
    xhr.open("get", "https://us-street.api.smartystreets.com/street-address?street=" + street + "&auth-id=" + AUTH_ID + "&auth-token=" + AUTH_TOKEN, true); 
    xhr.send(); 
    var addresses; 

    xhr.onreadystatechange = function() {//Call a function when the state changes. 
    if(xhr.readyState == 4 && xhr.status == 200) { 
     addresses = JSON.parse(xhr.responseText); 
     $("#resultBox").text(addresses).show(); 
     console.log('Hello'); 
     } 
    } 
});  

Answer 2

Попробуйте ввести код. Использовать функцию document.ready

<script> 
      AUTH_ID = "123456789"; 
     AUTH_TOKEN = "123456789" 
     $(document).ready(function(){ 
     $("#myForm").submit(function(event) { 
     street = $("#street").val() 
     city = $("#city").val() 
     state = $("#state").val() 

     var xhr = new XMLHttpRequest(); 
     xhr.onreadystatechange = function() { 
     if (this.readyState == 4 && this.status == 200) { 

      var addresses = JSON.parse(xhr.responseText); 
      console.log(xhr.responseText) 
      $("#resultBox").text(addresses).show(); 
     } 
     }; 
     xhr.open("get", "https://us-street.api.smartystreets.com/street-address?street=" + street + "&auth-id=" + AUTH_ID + "&auth-token=" + AUTH_TOKEN, true); 
     xhr.send(); 

     event.preventDefault(); 
     }); 
     }); 
      </script>