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

Front-end
#1

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

[code]<%@ 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” >













<form:label path=“nome”>Nome</form:label> <form:input path=“nome” />
<form:label path=“nascimento”>Data de nascimento</form:label> <form:input path=“nascimento” />

</form:form>[/code]

lista.jsp

[code]<%@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” %>

Id Nome Nascimento
-Remover
[/code]

index.jsp

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

Pessoas - Ajax 
$(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>
[/code]

e finalmente meu Controller

[code]@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);
}

}[/code]

#2

Tente fazer o seguinte:
Coloque a requisição do form dentro de um evento submit

$("#pessoa-formulario").submit(function(){ $.ajax({ //restante do codigo: type, url, data, success }); return false; });
Fazendo isso, a sua requisição será executada sem o refresh por causa do return false que não permitirá que a página recarregada

#3

Faz assim:

$("#pessoa-formulario").submit(function(e){
e.preventDefault();
$.ajax({
//restante do codigo: type, url, data, success
});
});

Não esquecei do “e” como parâmetro no function(e)

#4