Извлечение запроса API GET путем анализа строки JSON

Question

Извлечение запроса API GET путем анализа строки JSON

1

https://www.codeply.com/go/Dfsq1LcxTM

Я пытаюсь взять почтовый индекс пользователя, чтобы запросить представителей населенного пункта. В целях устранения неполадок я пытаюсь войти в консоль как почтового индекса, так и URL-адреса, включая почтовый индекс.

HTML

<div id="form">
<form type="text" class="form-inline" role="form">
  <label for="address" name="postalcode">Enter an address or postal code</label>
  <input id="search" placeholder="Enter an address or postal code" type="text">
  <button id="go">
    <span class="glyphicon glyphicon-search"></span> Find
  </button>
</form>
</div>

JavaScript

$(document).ready(function(){
$("#go").click(function(){

  var searchWord = $("#search").val();
  var url = "https://represent.opennorth.ca/postcodes/"+searchWord+"/?format=apibrowser";
  console.log(searchWord);
  console.log(url);
})

});

Очевидно, я делаю что-то не так. Есть идеи что?

Sean Michael Conway 24 апр. 2019, в 17:59

Источник

Теги:

javascript

json

api

2 ответа

Ещё вопросы

7sqr · Answer 1 · 2019-04-24T14-23-00.000Z

Вы пытаетесь заставить это работать на щелчке? Если так, удалите готовую функцию, которая оборачивает вашего слушателя.

Так что, если вы просто оставите это так:

   $("#go").click(function(){
     var searchWord = $("#search").val();
     var url = "https://represent.opennorth.ca/postcodes/"+searchWord+"/?format=apibrowser";
     console.log(searchWord);
     console.log(url);
})

он должен выдавать то, что вы хотите в консоли.

Удаление готового обработчика событий определенно не поможет. Это может усугубить ситуацию, если элемент <script> появится перед кнопкой в DOM (поэтому кнопка не будет существовать, когда будет выполнен поиск для ее поиска, чтобы можно было связать обработчик события click).
Хм, хорошая точка зрения, спасибо за указание на это.

Quentin · Answer 2 · 2019-04-24T13-48-00.000Z

Вы запускаете JavaScript при нажатии кнопки отправки.

Затем форма отправляется и загружается новая страница.

В общих настройках браузера консоль стирается.

Вам необходимо предотвратить отправку формы. Вызовите preventDefault для объекта события.

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

$(document).ready(function() {
    $("form").on("submit", function(event) {
        event.preventDefault();
        var searchWord = $("#search").val();
        var url = "https://represent.opennorth.ca/postcodes/" + searchWord + "/?format=apibrowser";
        console.log(searchWord);
        console.log(url);
    });

});

Asides:

<div id="form">

Использование типа элемента HTML в качестве идентификатора в лучшем случае сбивает с толку, тогда это идентификатор элемента другого типа: вдвойне.

<form type="text" class="form-inline" role="form">

В элементе формы нет атрибута type.

Элемент формы по сути является формой. Нет смысла использовать атрибут role, чтобы он действовал как форма.

Спасибо! Решение, которое вы предоставили, прекрасно работает. Когда я пытаюсь подключить решение к своему проекту, я получаю две постоянные ошибки: 1. iframe, у которого есть и атрибуты-песочницы, и allow-same-origin для своего атрибута песочницы, может удалить свою песочницу 2. Кодировка символов оформленного документа не была объявлена. Документ может выглядеть по-другому, если его просматривать без документа, обрамляющего его. Любая подсказка относительно того, почему это будет иметь место? (Для справки: codeply.com/go/Dfsq1LcxTM Попробуйте почтовый индекс, например K2H6G7)
@SeanMichaelConway - я не могу воспроизвести это. Я подозреваю, что это вызвано расширением браузера.