getJSON вызывается кнопкой внутри формы

Question

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

Если кнопка находится внутри формы, метод getJSON не возвращает результатов.

Код в основном выполняет XHR-запрос при нажатии кнопки «Отправить» на основе выбранного значения. Я повторил проблему здесь: http://jsfiddle.net/z6caj/

Большое спасибо,

Answer 1

Нажатие кнопки отправит форму обычным способом (при размещении внутри формы). return false в конце вашего обработчика кликов, и он должен работать как положено. Также можно предотвратить отправку, сделав обработчик отправки формы return false:

$("form").submit(function() {
    return false;
});

Answer 2

Потому что это кнопка отправки, и вы ничего не делаете для предотвращения действия по умолчанию.

Итак, JS запускается (запускает запрос Ajax), а затем отправляет форму (покидает страницу и отбрасывает запрос).

См. http://docs.jquery.com/Tutorials:How_jQuery_Works (раздел, начинающийся с «Клика и большинства других событий»)

Answer 3

На самом деле вы можете выполнить ajax-запрос в раскрывающемся списке, используя событие onchange, например,

$('#state').change(function(){

     //do stuff

}