тег <form> удаляет часть кода после запроса ajax?

У меня есть такая форма:

 <form>
    <input class="form-control" id="searchField" type="text">
    <button type="submit" id="searchUserButton">SEARCH BUTTON</button>
</form>

Когда я нажимаю кнопку SEARCH (я использую jquery для определения, когда нажимается кнопка), я вызываю ajax-запрос, и я печатаю некоторую информацию из json-файла в html-файле, НО что-то странное происходит:

Я не вижу результата! В противном случае, если я удалю тег формы (так что у меня есть только элемент ввода и кнопки), все в порядке, я могу видеть все данные ... так что происходит ?! Как я должен сделать правильный запрос ajax с jquery (поэтому, когда кнопка нажата)?

Jquery:

    $("#searchUserButton").bind("click", function () {
    searchData();
    });

Ajax:

function searchData() {
    $.ajax({
        type: 'GET',
        url: 'data/file.json',
        dataType: 'json',
        success: showData,
        error: function () {
            // FAIL
            alert("ERROR!");
        }
    });

}

javascript,jquery,html,ajax,

0

Ответов: 2

1

Измените событие клика на это:

$("#searchUserButton").bind("click", function (e) {
    e.preventDefault();
    searchData();
});

Ваша проблема, похоже, была тем, что я предположил в комментариях выше.

type="submit"Кнопка внутри <form>вызовет форму , чтобы обработать и перезагрузку страницы, в то время как без <form>тегов, этого не произойдет. Поступая e.preventDefault();, вы даете указание кнопке не отправлять форму и вместо этого выполнять свою searchData()функцию.

0

Просто измените

<button type="submit" ...

в

<button type="button" ...

иначе форма отправляется в любом случае, а ваша страница перезагружается независимо от ваших обработчиков кликов.

JavaScript, JQuery, HTML, AJAX,
Похожие вопросы
Яндекс.Метрика