Submit sem refresh de página - Spring MVC/JQuery Ajax

Não estou conseguindo fazer algo q me parece básico...alguem me ajuda?

Preciso adicionar um item na lista porém sem o refresh da página...do jeito q está, ao clicar no botão do form ele faz o submit e adiciona corretamente, porem é feito o refresh...parece q o AJAX não está funcionando perfeitamente...alguem pode dar uma ajuda...por favor.

Abaixo estão os codigos q utilizei

form.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

<form:form method="post" action="/pessoa/ajax/listaPessoas.shtml" modelAttribute="pessoa" id="pessoa-formulario"  >
	<table>
		<tr>
			<td><form:label path="nome">Nome</form:label></td>
			<td><form:input path="nome" /></td>
		</tr>
		<tr>
			<td><form:label path="nascimento">Data de nascimento</form:label></td>
			<td><form:input path="nascimento" /></td>
		</tr>
		<tr>
			<td colspan="2"><input type="submit" value="Incluir" id="bt"/></td>
		</tr>
	</table>
</form:form>

lista.jsp

<%@page pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<table border="1">
	<tr>
		<th>Id</th>
		<th>Nome</th>
		<th>Nascimento</th>
		<th></th>
	</tr>
	<c:forEach items="${pessoas}" var="pessoa">
		<tr>
			<td><c:out value="${pessoa.id}"/></td>
			<td><c:out value="${pessoa.nome}"/></td>
			<td><fmt:formatDate value="${pessoa.nascimento}" pattern="dd/MM/yyyy"/></td>
			<td><a href="javascript:remover(${pessoa.id});">-Remover</a></td>
		</tr>
	</c:forEach>
</table>

index.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>

<html>
<head>
	<title>Pessoas - Ajax</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script>

	$(document).ready(function(){
		$.ajax({
			type:"GET",
			url:'listaPessoas.shtml',
			data:$("#pessoa-formulario").serialize(), // serializes the form's elements.
			success:function(response) {
			    $('#lista-pessoas').html(response);
			}
		});
		$.ajax({
			type:"POST",
			url:'criar.shtml',
			data:$("#pessoa-formulario").serialize(), // serializes the form's elements.
			success:function(response) {
			    $('#form-pessoas').html(response);
			}
		});
		return false;
	});
		
	</script>
</head>

<body>
	<div id="form-pessoas"></div>
	<div id="lista-pessoas"></div>
</body>

</html>

e finalmente meu Controller

@Controller
@RequestMapping("/pessoa/ajax")
public class PessoaAjaxController {
	
	private PessoaDAO pessoaDAO;
	
	@Autowired
	public PessoaAjaxController(PessoaDAO pessoaDAO) {
		this.pessoaDAO = pessoaDAO;
	}
	
	@RequestMapping("/index")
	public String index() {
		return "/pessoa/ajax/index";
	}

	@RequestMapping("/listaPessoas")
	public String getPessoas(Model model) {
		model.addAttribute("pessoas", pessoaDAO.findAll());
		return "/pessoa/ajax/lista";
	}
	
	@RequestMapping("/criar")
	public String novo(Model model) {
		model.addAttribute("pessoa", new Pessoa());
		return "/pessoa/ajax/form";
	}
	
	@RequestMapping("/alterar/{id:\\d+}")
	public String alterar(@PathVariable Long id, Model model) {
		model.addAttribute("pessoa", pessoaDAO.findById(id));
		return "/pessoa/ajax/form";
	}
	
	@RequestMapping(method=RequestMethod.POST, value="/listaPessoas")
	public String salvarAlteracao(@ModelAttribute("pessoa") Pessoa pessoa, Model model){
		pessoaDAO.save(pessoa);
		return "/pessoa/ajax/index";
	}
	
	@RequestMapping("/remover/{id:\\d+}")
	public String remover(@PathVariable Long id, Model model) {
		pessoaDAO.delete(id);
		return getPessoas(model);
	}
}

2 Respostas

Topicos relacionados