Ajuda em usar Ajax com Vraptor 3

Boa tarde.

Estou estudando um poco de Ajax e queria fazer algo básico usando o VRaptor 3.5 e estou me perdendo em alguns conceitos.

Tenho um formulário de apenas 2 campos e queria fazer um “update” usando Ajax.

Vou colocar oque tenho que está funcionando e queria que me ajudassem a mudar de modo que funcionasse usando o Ajax, atualizando o conteúdo da página sem refresh ou com refresh (oque for mais fácil). Acredito que terei que usar Javascript também devido ao Ajax, e é nisso que estou me perdendo, bem como oque modificar no Controller.

Meu Controller :

@Path("/usuario/update")
    @Acesso({TipoPerfil.ADMINISTRADOR, TipoPerfil.SOCIAL})
    public void update(Usuario usuario) {        
          this.daoFactory.getUsuarioDao().atualiza(usuario);
        result.redirectTo(UsuarioController.class).profile();
    }

Meu Dao

public void atualiza(T u) {
        Transaction tx = session.beginTransaction();
        try {
        session.update(u);
        tx.commit();
        } catch (HibernateException e) {
            tx.rollback();            
            throw new Exception();
        }        
        session.close();
    }

Aqui um formulário simples, onde é apresentado um “sumário” com dados do usuário e uma opção para editar.
Clicando em editar, o formulário de edição é apresentado.

<div class="body">
    <div class="view" >
             ${usuario.sumario}
    </div>                                
    <div class="edicao">
         <form name="formEditSumario"  id="formEditSumario" action="<c:url value="/usuario/update"/>" method="post">
          <input type="hidden" name="usuario.cod" id="usuarioCod" value="${usuario.cod}">     
          <input type="text" name="usuario.sumario" id="usuarioSumario" value="${usuario.sumario}">     
         <div class="buttons">
         <button class="btn btn-primary btn-sm"  id="submitform">Save</button>
         <button data-ma-action="profile-edit-cancel" class="btn btn-link btn-sm">Cancel</button>
         </div>
  </form>
</div> </div>

Pega a ideia daqui

Seguindo sua sugestão, ocorre que após o update, a página fica em branco com o dado atualizado. Na url o endereço muda para: usuario/update

Pelo que entendi, após o submit do formulário, o resultado deveria aparecer apenas na div com id: retorno

Saberia me dizer onde está dando problema?

Posta como ficou seu codigo HTML, JS e servidor Java após a mudanca.

@javaflex desconfio que seja essa linha no controller: result.use(Results.http()).body(usuario.getSumario());

Pois o resultado aparece em uma página em branco com a url do formulário… pelo exemplo que você passou, deveria fazer o update, manter a url e no id “retorno” apresentar alguma mensagem, que no meu caso, optei por mostrar o conteudo modificado.

Controller:

 @Post("/usuario/update")
    @Acesso({TipoPerfil.ADMINISTRADOR, TipoPerfil.SOCIAL})
    public void update(Usuario usuario) {        
        Usuario usu = daoFactory.getUsuarioDao().carrega(usuario.getCod());
        usu.setSumario(usuario.getSumario());
        String retorno = usuario.getSumario();
        this.daoFactory.getUsuarioDao().atualiza(usu);
                result.use(Results.http()).body(usuario.getSumario()); 
                

    }

formulario:

<div class="body">
    <div class="view" >
             ${usuario.sumario}
    </div> 
<div class="view2" id="retorno" > // **id com o conteudo modificado**
             ${usuario.sumario}
    </div>                                                    
    <div class="edicao">
         <form name="formEditSumario"  id="formEditSumario" action="<c:url value="/usuario/update"/>" method="post">
          <input type="hidden" name="usuario.cod" id="usuarioCod" value="${usuario.cod}">     
          <input type="text" name="usuario.sumario" id="usuarioSumario" value="${usuario.sumario}">     
         <div class="buttons">
         <button class="btn btn-primary btn-sm"  id="submitform">Save</button>
         <button data-ma-action="profile-edit-cancel" class="btn btn-link btn-sm">Cancel</button>
         </div>
  </form>
</div> </div>

JS

<script type="text/javascript">  
    $(document).ready(function() {
		var options = {
				target:'#retorno',
				success: showResponse,
				dataType: 'text'
		};
	    $('#formEditSumario').submit(function() {  
	        $(this).ajaxSubmit(options);  
	        return false; 
	    }); 
	}); 
	function showResponse(responseText, statusText, xhr, $form)  { 
	    $('#retorno').html(responseText);
	}
</script>

Tem que debugar no browser a funcao showResponse pra saber o que acontece.