Заменить частичное представление с данными ответа ajax - PullRequest
0 голосов
/ 04 декабря 2018

У меня есть два представления - adminPage.jsp и studentForm.jsp.

В adminPage у меня есть кнопка, с помощью которой пользователь может открыть студента (получить studentForm с помощью ajax).Пользователь может ввести данные студента в эту форму и затем нажать кнопку регистрации, чтобы добавить студента в базу данных.

Эта операция выполнена успешно, но у меня есть одна проблема.Почтовый запрос (запрос на добавление учащегося в базу данных) вызывается с studentForm.jsp и в нем также получен результат.Я хочу заменить существующий 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>

enter image description here

1 Ответ

0 голосов
/ 05 декабря 2018

Я заменил это:

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

        });

и проблема была решена.

Заключение :

  1. onSubmit в этом случае не работает.Может использоваться submit, но более новый подход, описанный в документации Jquery: on("submit", function (e) ...

  2. форма должна быть сериализована form.serialize()

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...