Javascript JQuery表单提交不使用API

我正在尝试从表单提交中检索日期，以便在SmartyStreet API请求中使用。它没有从API输出响应

HTML:

---

感谢您的帮助，我只想知道为什么它不起作用，以及是否有更好的方法。感谢

您可以使用onreadystatechange属性监视请求的状态，当状态更改时调用函数，当请求的状态为4（已完成）且响应状态代码为200（确定）时，然后使用响应文本属性返回的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');
      }
    }
 });     

---

试试下面的代码。使用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>

AUTH_ID=“123456789”；
AUTH_TOKEN=“123456789”
$（文档）.ready（函数（）{
$（“#myForm”）.submit（函数（事件）{
街道=$（“#街”）.val（）
城市=$（“#城市”）.val（）
state=$（“#state”）.val（）
var xhr=new XMLHttpRequest（）；
xhr.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
var addresses=JSON.parse（xhr.responseText）；
console.log（xhr.responseText）
$（“#结果框”）.text（地址）.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（）；
});
});

谢谢！在你和@PramodPatil之间，我能够让它运行。onreadystatechange属性是一个很好的添加，但我也忘了在开始时添加文档ready.：'（太好了！很高兴我能帮上忙，请在我的答案旁边打勾，我将不胜感激。

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

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