javascript - 用Ajax响应数据替换部分 View

我有两个视图-adminPage.jsp和studentForm.jsp。
在adminPage中，我有一个按钮，允许用户打开student from（使用ajax获取studentForm）。用户可以在此表单中输入学生数据，然后单击“注册”按钮在数据库中添加学生。
此操作已成功执行，但我有一个问题。Post请求（在数据库中添加学生的请求）从studentForm.jsp调用，结果也在其中接收。我想用一个新的替换一个现有的studentForm（在POST请求之后收到的响应），但是结果，我把整个页面替换为studentForm。
我该换什么？
这是adminPage，我在这里发出get请求，并用id-viewContainer加载div元素中的响应：

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

        <script>

            function onk() {
                $.get({
                    url: "/student/studentForm",
                    success: function (result) {
                        $('#viewContainer').html(result);
                    }
                });
            }

        </script>
    </head>

    <body>
        <h4>Username: ${user.username}</h4>

        <h1>heading 1</h1>
        <p> paragraph 1</p>
        <p> paragraph 2</p>

        <input type="button" id="userAddLoader" value="Add Student" onclick="onk();"/>

        <div id="viewContainer" style="background-color: red">
            <!-- this is container -->
        </div>

    </body>
</html>

这是studentForm.jsp：

<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>

            $('#form1').onsubmit(function (e) {

                var form = $('#form1');

                $.post({
                        url: form.attr("action"),
                        data: form,
                        success: function (data) {
                            $('#viewContainer').html(data);
                        }
                    }
                );

                e.preventDefault(); //avoid to execute the actual submit of the form

            });
        </script>
    </head>
    <body>

        <c:set var="stat" scope="request" value="${status}"/>
        <c:if test="${stat == 'success'}">
            <script>
                alert("Student was successfully added");
            </script>
        </c:if>

        <h6>New Student Registration</h6>
        <form:form action="/student/postStudent" method="post" modelAttribute="user" id="form1">
            Username: <form:input type="text" path="username" id="username"/>
            Password: <form:input type="text" path="password" id="password"/>
            <input type="submit" value="Register">
        </form:form>
    </body>
</html>

最佳答案

我换了这个：

$('#form1').onsubmit(function (e) {

            var form = $('#form1');

            $.post({
                    url: form.attr("action"),
                    data: form,
                    success: function (data) {
                        $('#viewContainer').html(data);
                    }
                }
            );

            e.preventDefault(); //avoid to execute the actual submit of the form

        });

有了这个：

$('#form1').on("submit", function (e) {

            var form = $('#form1');

            $.post({
                    url: form.attr("action"),
                    data: form.serialize(),
                    success: function (data) {
                        $('#viewContainer').html(data);
                    }
                }
            );

            e.preventDefault();

        });

问题解决了。
结论：
onSubmit在这种情况下不起作用。可以使用submit，但Jquery文档中描述的较新方法是on("submit", function (e) ...
表单应序列化form.serialize()

StudentForm

javascript - 用Ajax响应数据替换部分 View