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

Question

I have a table populated by a SQL database. The table is hidden until a search button is clicked to return the results.

I'm trying to use ajax to refresh the table, rather than the page. If the page refreshes, the class on the table returns making it hidden again so the content of the table only appears briefly.

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

Form:

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

The code above runs and executes fine but the page still refreshes. I suspect I've missed something.

Answer 1

use 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

use event.preventDefault()

The Event interface's preventDefault() method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be. The event continues to propagate as usual, unless one of its event listeners calls stopPropagation() or stopImmediatePropagation(), either of which terminates propagation at once.

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

Then in your PHP

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