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

问题描述

我有两种观点 -adminPage.jsp和studentForm.jsp.

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

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

我应该改变什么？

这是 adminPage，我在其中发出获取请求并在 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>

标签： javascripthtmlajaxspringjsp

我替换了这个：

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

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

问题描述

解决方案

推荐阅读