Обновление таблицы при добавлении записи с помощью jQuery и Spring MVC

 
 
 
Сообщения:1
Всем привет.
Проблема такая, есть jsp с формой для добавления нового ученика и таблица со списком всех учеников, хочу с помощью jQuery релизовать добавления и обновление только таблицы, а не страницы в целом. То есть отправили данные, запись сразу появилась в таблице.

Вот сама jsp:
Скрипт в head
<head>
    <title>Студенты</title>
	
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	
	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	
	<script>
	function add(){
		var firstName = $('#firstName').val();
		var lastName = $('#lastName').val();
		var entranceYear = $('#entranceYear').val();
		
		$.ajax({
			type: "POST",
			url: "/studentAdd",
			data: "firstName=" + firstName + "&lastName=" + lastName + "&entranceYear=" + entranceYear,
			success: function(responce){
				<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>
				}
			}
		});
	}
</script>
</head>


Форма добавления и таблица

<div class="studentAdd">
    <c:choose>
		<c:when test="${edit eq true}">
			<h2>Форма редактирования студента</h2>
		</c:when>
		<c:otherwise>
			<h2>Форма добавления студента</h2>
		</c:otherwise>
	</c:choose>
			<input type="hidden" path="id" id="id"/>
				<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>

</div>

<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">
            <c:if test="${student.deleted eq false}">
                <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:if>
        </c:forEach>
    </table>
</div>


Контроллер:
@RequestMapping(value = {"/studentAdd"}, method = RequestMethod.POST)
	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;
	}



При попытке отправить данные в контроллер, url получается такой
http://localhost:8080/university/?firstName=ААА&lastName=БББ&entranceYear=22%2F02%2F2016

То есть обработчик в url скрыт или не передается, а данные отображены в url, хотя в параметрах стоит способ запроса POST

Кто-нибудь может объяснить как правильно это все оформить ?
 
 
Сообщения:258
Это у Вас в функции add() тип запроса POST, а <input type="submit"... по умолчанию в GET отправляет. Попробуйте изменить на <input type="button"..., или вообще элемент <button> использовать, или указать в onClick="event.preventDefault();add()"

"Любая техническая система должна быть идиотоустойчивой" (с) один из университетских преподов
 
Модераторы:Нет
Сейчас эту тему просматривают:Нет