javascript - 表单提交后如何重新加载页面？

问题描述

$('form').submit(function () {
    value = true;
    var schoolName = $('#addSchoolName').val();
    if (schoolName.trim() == '') {
        $('#addSchoolName').addClass('border border-danger');
        value = false;
    }
    if (value) {
      return true;
    }
    else { return false;}
});

$("form").bind('ajax:complete', function () {
    window.location.reload();
});

$('#close').on('click', function () {
    $('#addSchoolName').removeClass('border border-danger');
    $('#addSchoolName').val('');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  class="modal fade" id="addSchool" tabindex="-1" role="dialog" aria-labelledby="addSchoolTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered cls" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <label class="modal-title" id="addSchoolTitle">Add School Details</label>
            </div>
            <form asp-action="AddNewSchool" asp-controller="School" asp-antiforgery="true" method="post">
                <div class="modal-body form-group row align-items-center">
                    <div class="col-md-4">
                        <label for="Name">School Name</label>
                    </div>
                    <div class="col-md-8">
                        <input class="form-control" name="Name" id="addSchoolName" />
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary " id="close" data-dismiss="modal">Close</button>
                    <button type="submit" id="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

我在模态中使用表单并提交该表单。我想重新加载我的页面，以便在提交表单后，该模式后面的列表将更新。我不想使用 Ajax 调用来提交表单。

 <div  class="modal fade" id="addSchool" tabindex="-1" role="dialog" aria-labelledby="addSchoolTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered cls" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <label class="modal-title" id="addSchoolTitle">Add School Details</label>
            </div>
            <form asp-action="AddNewSchool" asp-controller="School" asp-antiforgery="true" method="post">
                <div class="modal-body form-group row align-items-center">
                    <div class="col-md-4">
                        <label for="Name">School Name</label>
                    </div>
                    <div class="col-md-8">
                        <input class="form-control" name="Name" id="addSchoolName" />
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary " id="close" data-dismiss="modal">Close</button>
                    <button type="submit" id="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

现在写，我正在表单上应用这个验证。

   @section scripts{
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript">
        $('form').submit(function () {
            value = true;
            var schoolName = $('#addSchoolName').val();
            if (schoolName.trim() == '') {
                $('#addSchoolName').addClass('border border-danger');
                value = false;
            }
            if (value) {
              return true;
            }
            else { return false;}
        });

        $("form").bind('ajax:complete', function () {
            window.location.reload();
   });

        $('#close').on('click', function () {
            $('#addSchoolName').removeClass('border border-danger');
            $('#addSchoolName').val('');
        });
    </script>

我不想使用 ajax 调用来提交表单，我想在模态中提交表单后重新加载页面，以便更新该模态后面的列表。

标签： javascripthtmljquery

javascript - 表单提交后如何重新加载页面？

问题描述

解决方案

推荐阅读