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

【问题标题】：Replace partial view with ajax response data用 ajax 响应数据替换部分视图
【发布时间】：2019-05-05 21:59:24
【问题描述】：

我有两个视图 - adminPage.jsp 和 studentForm.jsp。

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

此操作执行成功，但我有一个问题。从studentForm.jsp 调用发布请求（在数据库中添加学生的请求），结果也会在其中收到。我想用新的studentForm 替换现有的studentForm（在发布请求后收到响应），但结果，我将整个页面替换为studentForm。

我应该改变什么？

这是 adminPage，我在这里发出 get 请求并将响应加载到 div 元素中，id - viewContainer:

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

【问题讨论】：

检查您的 servlet 是否定义了重定向。 onSubmit 不是有效的 jquery 事件，请改用 submit。
submit 似乎已被弃用，它也没有提交表单。我正在使用默认配置的 spring-boot
然后使用按钮点击事件列表器提交表单

标签： javascript html ajax spring jsp

【解决方案1】：

我替换了这个：

$('#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()

【讨论】：