javascript - 使用 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");
                }
            });
        });
    });