Javascript 用ajax响应数据替换部分视图_Javascript_Html_Ajax_Spring_Jsp

Javascript 用ajax响应数据替换部分视图

javascript html ajax spring jsp

Javascript 用ajax响应数据替换部分视图,javascript,html,ajax,spring,jsp,Javascript,Html,Ajax,Spring,Jsp,我有两个视图-adminPage.jsp和studentForm.jsp 在adminPage中，我有一个按钮，允许用户从中打开学生（使用ajax获取学生表单）。用户可以在此表单中输入学生数据，然后单击“注册”按钮在数据库中添加学生此操作已成功执行，但我有一个问题。Post请求（在数据库中添加学生的请求）从studentForm.jsp调用，结果也在其中接收。我想用新的studentForm替换现有的studentForm（post请求后收到的响应），但结果是，我将整个页面替换为student

我有两个视图-

adminPage.jsp

和

studentForm.jsp

在

adminPage

中，我有一个按钮，允许用户从中打开学生（使用ajax获取学生表单）。用户可以在此表单中输入学生数据，然后单击“注册”按钮在数据库中添加学生

此操作已成功执行，但我有一个问题。Post请求（在数据库中添加学生的请求）从

studentForm.jsp

调用，结果也在其中接收。我想用新的

studentForm

替换现有的

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>

我替换了这个：
$('#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”，函数（e）.

表单应序列化form.serialize（）

检查您的servlet，可能已定义重定向。onSubmit
不是有效的jquery事件，请改用submit。submit似乎已被弃用，而且它也不提交表单。我正在使用带默认配置的spring boot，然后使用按钮单击事件列表器提交表单
$('#form1').on("submit", function (e) {

            var form = $('#form1');

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

            e.preventDefault();

        });