Заменить частичное представление данными ответа ajax

У меня два вида - adminPage.jsp и studentForm.jsp.

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

Эта операция прошла успешно, но у меня есть одна проблема. Пост-запрос (запрос на добавление студента в базу данных) вызывается из 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>

Заменить частичное представление данными ответа ajax

Проверьте свой сервлет, возможно, определено перенаправление. onSubmit не является допустимым событием jquery, используйте вместо него submit.

— 05.12.2018 09:21

submit, кажется, устарел, и он тоже не отправляет форму .. Я использую spring -boot с конфигурацией по умолчанию

— 05.12.2018 18:34

Затем отправьте форму с помощью прослушивателя событий нажатия кнопки

— 05.12.2018 19:51

javascript html ajax spring jsp

04.12.2018 13:59

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

492

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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()

05.12.2018 19:58

Другие вопросы по теме

У меня есть элемент изображения, который отображает текущее изображение профиля пользователя. Могу ли я изменить src этого изображения на изображение внутри входного файла?

Таблицы данных - скрытие столбца и порядка таблицы

Показывать глификон во входном флажке в метке

Значения раскрывающегося списка не отображаются в окнах

Есть ли краткая форма для этого селектора CSS

Таблица HTML с фиксированным размером и переносом текста

Как я могу приостановить все видео html5, кроме того, которое я выбрал для воспроизведения?

XPath выберите ввод, который происходит перед некоторым div с другим текстом

Определение типа навигации из PerformanceNavigationTiming

Как получить эффект фонового матового стекла без использования фонового изображения

Заменить частичное представление данными ответа ajax

Ответы 1

Другие вопросы по теме

Похожие вопросы