Есть сервлет:
@WebServlet("/")
public class MainServlet extends HttpServlet {
@Override
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//
}
@Override
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Map columns = new HashMap();
columns.put("FirstName", request.getParameter("FirstName"));
columns.put("SecondName", request.getParameter("SecondName"));
columns.put("LastName", request.getParameter("LastName"));
columns.put("Receiver", request.getParameter("Receiver"));
columns.put("Theme", request.getParameter("Theme"));
columns.put("Message", request.getParameter("Message"));
boolean hasConnected;
DBController db = new DBController();
hasConnected = db.isConnected();
if(hasConnected) {
System.out.println("DB connected");
System.out.println(db.insert("mytable", columns));
}
else System.out.println("Connection failed!");
doGet(request, response);
}
}
и JSP-страница с несколькими полями ввода:
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Форма обратной связи</TITLE>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
function sendData() {
$.ajax({
type: "POST",
url: "/servlet/ShowParameters",
data: $('#formId').serialize(),
}).done(function (res) { alert("send by ajax"); });
}
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".button").click(function(){
ver = true;
first_name = $("#FirstName").val();
second_name = $("#SecondName").val();
last_name = $("#LastName").val();
var p = /^[а-яА-ЯёЁa-zA-Z0-9 \-]{2,35}$/i;
if(!p.test(first_name)) {
message_a = "Укажите Фамилию";
ver = false;
}
else if(!p.test(second_name)) {
message_a = "Укажите Имя";
ver = false;
}
else if(!p.test(last_name)) {
message_a = "Укажите Отчество";
ver = false;
}
if(ver) {
sendData();
return true;
}
else {
alert(message_a);
return false;
}
});
});
</script>
</HEAD>
<BODY>
<form ACTION = "/servlet/ShowParameters" method = "post" id = "formId">
Фамилия:<input TYPE="TEXT" id = "FirstName" NAME = "FirstName">
Имя:<input TYPE="TEXT" id = "SecondName" NAME = "SecondName">
Отчество:<input TYPE="TEXT" id = "LastName" NAME = "LastName">
<input type = "button" class = "button" value = "Сохранить"/>
<div style = "font-family: 'Calibri Light'">
<br><hr>
<table id = "myTable" width="100%">
<tr>
<td>Фамилия</td>
<td>Имя</td>
<td>Отчество</td>
</tr>
</table>
</div>
</form>
Когда нажимаю кнопку "Сохранить", у меня проходит проверка заполненности полей, а затем отрабатывает функция AJAX "sendData()". Данные успешно сохраняются в таблицу PostgreSQL.
Я сейчас хочу, чтобы после сохранения очередной записи в таблице, произошел какой нибудь select и всё содержимое таблички выгрузилось на эту же страницу внизу.
Прочитал что в JQuery есть метод load() который может загружать не только контент страницы, но и выбранного контейнера на ней. Делается это следующим образом:
$("#area").load("something.html #content");
Данный код найдет на странице something.html контейнер с id content, возьмет его содержимое и загрузит в контейнер с id area.
Дальше не знаю как. У меня по идее есть таблица с id "myTable", но как туда загружать данные?
Или это совсем не так делается?