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()

事件接口的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']; ?>

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

2 个答案: