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

标签 javascript css ajax html

我有一个由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>


上面的代码可以正常运行并执行,但页面仍刷新。我怀疑我错过了一些东西。

最佳答案

使用e.preventDefault()

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

关于javascript - 使用AJAX单击提交按钮后刷新div,而不是页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55335399/

相关文章:

javascript - setAttribute(“transform”,…)在<symbol>元素上不起作用

javascript - 我想从200页中删除以下脚本

html - 在背景图像中心添加透明水平线

javascript - Css3在对象在视口(viewport)中之前对其进行动画处理

javascript - 如何使用此ajax函数发布多个输出?

javascript - 如何通过React componentDidMount()方法使用异步等待?

javascript - Javascript-console.log方法问题中的括号

php - 进入时打开HTML 5灯箱

javascript - Ajax 成功后重新执行 Javascript

jquery - 如何在rails中通过collection_select进行Ajax搜索?