2017-02-23 8 views
0

У меня возникли проблемы с фактическим возвратом любого объекта, используя этот вызов AJAX. Я знаю, что делаю что-то не так, но я понятия не имею, где. Я надеюсь, что кто-то может мне помочь. Я ищу, чтобы вернуть элемент в объект «zip». Я бы хотел получить какой-либо ответ, но я ничего не могу вернуть.Возврат AJAX с улиц smarty API

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#submit').click(function() { 
       var result = $('#resultDiv') 
       $.ajax({ 
        url: 'https://us-street.api.smartystreets.com/street-address', 
        method: 'get', 
        data: { 
         auth-id='your-auth-id', 
         auth-token='your-auth-token', 
         street=$('#street'), 
         city=$('#city'), 
         state=$('#state') 
        }, 
        dataType: 'json', 
        success: function(data) { 
         if (data = null) 
         { 
          result.html('You failed'); 
         } 
         else { 
          result.html('Match:' + data.components[0].zipcode) 
         } 
        } 
       }); 
      }); 
     }); 
    </script> 
    <title>SSTest</title> 
</head> 

<body> 
    <div class="container"> 
     <h1 style="text-align:center"> Welcome to Address Check </h1> 
     <form action="#" method="post"> 
      <div class="form-group"> 
       <label for="street">Street</label> 
       <input type="text" id="street" class="form-control" name="street"> 
      </div> 
      <div class="form-group"> 
       <label for="city">City</label> 
       <input type="text" id="city" class="form-control" name="city"> 
      </div> 
      <div class="form-group"> 
       <label for="state">State</label> 
       <input type="text" id="state" class="form-control" name="state"> 
      </div> 
      <button type="submit" id="submit" class="btn btn-default">Submit</button> 
      <br/> 
      <br/> 
      <div id="resultDiv"></div> 
</body> 

</html> 
+2

Вы действительно не должны размещать свой идентификатор и токен. Было бы неплохо удалить их из вашей учетной записи и создать новую пару. – SunSparc

+2

Я маскировал аутентификацию. – mdwhatcott

ответ

1

Как вы используете GET вызов, вы можете проверить это в браузере и убедиться в том, что вы получаете ответ, прежде чем начать окружив его вызова JQuery.

https://us-street.api.smartystreets.com/street-address?auth-id=[your-auth-id]&auth-token=[your-auth-token]&street=SOMETHING&state=SOMETHING&city=SOMETHING

Если вы получаете не-результат, то обратитесь к API, чтобы увидеть, если вы передаете правильные параметры.

Используя DOCS, этот вызов возвращает данные для ваших API ключей -

https://us-street.api.smartystreets.com/street-address?auth-id=[your-auth-id]&auth-token=[your-auth-token]&street=1600+amphitheatre+pkwy&city=mountain+view&state=CA&candidates=10

Это JQuery Get HTML пример получает ответ -

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("button").click(function(){ 
     $.get("https://us-street.api.smartystreets.com/street-address?auth-id=[your-auth-id]&auth-token=[your-auth-token]&street=1600+amphitheatre+pkwy&city=mountain+view&state=CA&candidates=10", function(data, status){ 
      alert("zipcode: " + JSON.stringify(data)); 
     }); 
    }); 
}); 
</script> 
</head> 
<body> 

<button>Send an HTTP GET request to a page and get the result back</button> 

</body> 
</html> 

Вы должны быть в состоянии построить от поскольку вы уточняете свое понимание JQuery, чтобы получить именно то, что вам нужно.

+0

Я протестировал его и подтвердил, что эти учетные данные и информация возвращают объект, но я не думаю, что получаю ответ вообще. Я думал, что это могут быть проблемы с интервалом, и проверил это и ничего не получил взамен. – watkins1179

+1

Помните, что для получения ответа, если адрес недействителен, вы должны установить для параметра соответствия значение "invalid" – Jeffrey

1

Я смог найти несколько ошибок с вашим кодом и исправил их здесь в this JSFiddle. Вот список ошибок, которые у вас были.

  1. Не включайте свой auth-id, auth-token в открытый код. Вы отдаете свои поиски адресов, делая это. Вы должны удалить их из своей учетной записи и создать новые.

  2. В вашей первоначальной функции success вы не сделали сравнения. Здесь вы должны использовать ==. Фактически, API никогда не будет отправлять обратно null для данных об успехе, поэтому вам больше не понадобится это здесь. Вместо этого используйте функцию error.

  3. Объект данных, переданный в вызове ajax, выполняется некорректно. Вы не должны использовать =, вместо этого используйте :.

  4. В объекте данных вы должны позвонить .val() после селекторов jQuery, чтобы получить значения, введенные в эти поля.

  5. data.components[0].zipcode должно быть data[0].components.zipcode. Api вернет массив данных объектов. components - это не массив.