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

您可以使用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 function

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

JQuery表单提交不使用API

2 个答案: