Обновление div, а не страницы после нажатия кнопки «Отправить» с помощью AJAX

Question

У меня есть таблица, заполненная базой данных SQL.Таблица скрыта, пока не будет нажата кнопка поиска, чтобы вернуть результаты.

Я пытаюсь использовать ajax для обновления таблицы, а не страницы.Если страница обновляется, класс в таблице возвращается и снова скрывается, поэтому содержимое таблицы отображается только на короткое время.

$(function () {
    $('#searchForm').on('submit', function () {
        $.ajax({
            type: 'GET',
            url: 'Index',
            data: $('#searchForm').serialize(),
            success: function () {
                $("#resultsTable").removeClass("d-none");
            }
        });
    });
});

Форма:

<form asp-page="./Index" id="searchForm" method="get">
    <div class="form-actions no-color">
        <p>
            Find by name:
            <input type="text" name="SearchString" value="@Model.CurrentFilter" />
            <input type="submit" value="Search" class="btn btn-default" id="searchName" />

            @*<a asp-page="./Index">Back to full List</a>*@
        </p>
    </div>
</form>

Приведенный выше код запускается ивыполняется нормально, но страница все еще обновляется.Я подозреваю, что что-то пропустил.

Answer 1

use event.preventDefault ()

Метод protectDefault () интерфейса события сообщает пользовательскому агенту, что если событие не обрабатывается явно, его действие по умолчанию не должнобыть принятым, как обычно.Событие продолжает распространяться как обычно, если только один из его прослушивателей не вызывает stopPropagation () или stopImmediatePropagation (), который не прерывает распространение сразу.

<input id="search" type="text" name="SearchString" value="@Model.CurrentFilter" />

$(function () {
$('#searchForm').on('submit', function (e) {
    e.preventDefault();
    const search = $('#search').val();
    $.ajax({
        type: 'GET',
        url: 'Index',
        data: { search },
        success: function () {
            $("#resultsTable").removeClass("d-none");
        }
    });
  });
});

Затем в вашем PHP

<?php searchValue = $_GET['search']; ?>

Answer 2

использование e.preventDefault()

 $(function () {
        $('#searchForm').on('submit', function (e) {
    e.preventDefault()
            $.ajax({
                type: 'GET',
                url: 'Index',
                data: $('#searchForm').serialize(),
                success: function () {
                    $("#resultsTable").removeClass("d-none");
                }
            });
        });
    });