JQueryフォームの提出がAPIで機能しない

Question

SmartyStreet APIリクエストで使用するフォーム送信から日付を取得しようとしています。 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

要求の状態が変化したとき、要求のステータスが4（完了）、応答ステータスコードが200（OK）のときに、onreadystatechangeプロパティを使用してリクエストの状態を監視できます。応答テキストプロパティから返されたjsonデータを使用してアドレステキストを変更します。私はこれが役立つことを願っています

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>