У меня есть два представления - 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>
