使用AJAX单击提交按钮后刷新div而不是页面

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

使用e.preventDefault()

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

Answer 2

使用event.preventDefault()

Event接口的preventDefault（）方法告诉用户代理，如果事件没有得到明确处理，则不应该像通常那样采取默认操作。事件继续像往常一样传播，除非其事件侦听器之一调用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']; ?>