Good day everyone! The question is, there is a jsp page on which a table with a list of students and a form for adding a new student, I want to fill in this form and send data from it to load this data into a table with students by means of ajax, that is, update only the table.
I have a controller that displays this page.
@RequestMapping(value = {"/","/students"}, method = RequestMethod.GET) public ModelAndView students(){ ModelAndView mov = new ModelAndView(); List<Student> list = studentService.getAll(); mov.addObject("studentList", list); mov.setViewName("students"); return mov; } Actually jsp page where the table with students
<div class="tableStudents"> <table border="2" bgcolor="#C1CDCD" > <th colspan="3">Студенты</th> <tr> <td align="center"><B>Имя</B></td> <td align="center"><B>Фамилия</B></td> <td align="center"><B>Дата поступления</B></td> </tr> <c:forEach items="${studentList}" var="student"> <tr> <td align="center">${student.firstName}</td> <td align="center">${student.lastName}</td> <td align="center">${student.entranceYear}</td> <td align="center"> <a href="<c:url value='/profile/student/${student.id}' />">Профиль</a> </td> </tr> </c:forEach> </table> Student Addition Form
<div class="studentAdd"> <c:choose> <c:when test="${edit eq true}"> <h2>Форма редактирования студента</h2> </c:when> <c:otherwise> <h2>Форма добавления студента</h2> </c:otherwise> </c:choose> <form> <input type="hidden" path="id" id="id"/> <table> <tr> <td><label for="firstName">Имя: </label> </td> <td><input type="text" name="firstName" id="firstName"/></td> </tr> <tr> <td><label for="lastName">Фамилия: </label> </td> <td><input type="text" name="lastName" id="lastName"/></td> </tr> <tr> <td><label for="entranceYear">Дата поступления(dd/mm/yyyy): </label> </td> <td><input type="text" name="entranceYear" id="entranceYear"/></td> </tr> <tr> <td colspan="3" align="center"> <c:choose> <c:when test="${edit eq true}"> <input type="submit" value="Обновить"/> </c:when> <c:otherwise> <input type="submit" value="Добавить" id="add" onClick="add()"/> </c:otherwise> </c:choose> </td> </tr> </table> </form> On the same page, I first connect the jquery and the script itself at the end
<script> $("add").click(function (){ var firstName = $("#firstName").val(); var lastName = $("#lastName").val(); var entranceYear = $("#entranceYear").val(); $.ajax({ url: "studentAdd", data: {"firstName": firstName, "lastName": lastName, "entranceYear": entranceYear }, type: "post", success: function(data){ <table border="2" bgcolor="#C1CDCD" > <th colspan="3">Студенты</th> <tr> <td align="center"><B>Имя</B></td> <td align="center"><B>Фамилия</B></td> <td align="center"><B>Дата поступления</B></td> </tr> $.each(data, function(index, student){ <tr> <td align="center">student.firstName</td> <td align="center">student.lastName</td> <td align="center">student.entranceYear</td> <td align="center"> <a href="<c:url value='/profile/student/student.id' />">Профиль</a> </td> </tr> </table> } }) } Here is the controller that should accept the data, add a new student to the database and return the updated list.
@RequestMapping(value = {"/studentAdd"}, method = RequestMethod.POST, produces = "application/json") public @ResponseBody List<Student> add(@RequestParam("firstName")String firstName, @RequestParam("lastName")String lastName, @RequestParam("entranceYear")LocalDate entranceYear){ studentService.save(new Student(firstName, lastName, entranceYear)); List<Student>studentList=studentService.getAll(); return studentList; } But my data is not transferred to POST, but GET and the url does not specify the name of the handler, so the data does not come to the controller, here is the url
http://localhost:8080/university/?firstName=Тест&lastName=Студент&entranceYear=22%2F02%2F2016 What could be the problem and how to organize it all?