Ajuda para corrigir rotina Ajax com Json

Front-end
#1

Olá pessoal, estou precisando realizar uma rotina de carregamento de combo de cidades dependente do combo de estado selecionado, utilizando
uma rotina ajax para renderização do combo de cidades.
Montei a seguinte estrutura porém o método não está sendo invocado na Controller, tentei colocar um breakpoint no método e nunca é alcançado.
Tanto o VRaptor quanto o servidor de aplicação não estão apresentando nenhum erro indicando onde corrigir.
Tentei ativar os debugadores de dois browsers, Chrome e IE 11 mas ainda não consegui identificar o erro.

Qualquer ajuda será bem vinda.

Controller

[code]import static br.com.caelum.vraptor.view.Results.json;

@Resource
public class ClienteController implements ControllerIF {

@SuppressWarnings("unused")  
private static final Logger LOG = Logger.getLogger(ClienteController.class);  

private final Result result;  
private final Validator validator;  
private final ClienteService clienteService;  
private final EstadoService estadoService;  
private final CidadeService cidadeService;  
private static ResourceBundle bundle;  
private List<Estado> estados = null;  
private List<Cidade> cidades = null;  

public ClienteController(ClienteService clienteService, EstadoService estadoService, CidadeService cidadeService, Result result, Validator validator) {  
    this.result = result;  
    this.validator = validator;  
    this.clienteService = clienteService;  
    this.estadoService = estadoService;  
    this.cidadeService = cidadeService;  
    bundle = ResourceBundle.getBundle(ConstantesUtil.MESSAGES_RESOURCE);  
}  

@Get  
@Publico  
@Path("/cliente/loadCidadesPorEstado/{estado.idEstado}")  
public void loadCidadesPorEstado(Estado estado) {  
    //Carregar cidades de acordo com o estado informado  
    if(estado != null && estado.getIdEstado() != null){  
        this.cidades = cidadeService.loadCidadesPorEstado(estado);  
        result.use(json()).from(cidades).serialize();  
    }  
      
    result.include("cidades", cidades);  
}

[/code]

Formulário

<div class="controls">  
    <c:if test="${not empty estados}">  
        <label class="ls-label"><fmt:message key="cliente.estado" /></label>  
        <select id="clienteEstado" name="cliente.cidade.idEstado" style="background-color:#FF9; color:#000;">  
          <option selected value="#">Selecione um item</option>  
          <c:forEach var="estado" items="${estados}">  
            <option value="${estado.idEstado}">${estado.descricao}</option>  
          </c:forEach>  
        </select>  
    </c:if>  
  
    <c:if test="${not empty cidades}">  
        <label class="ls-label" style="margin-left: 52px;"><fmt:message key="cliente.cidade" /></label>  
        <select id="clienteCidade" name="cliente.cidade.idCidade" style="background-color:#FF9; color:#000;" disabled>  
          <option selected value="#">Selecione um item</option>  
        </select>  
    </c:if>  
</div>

Chamada Ajax 

$("#clienteEstado").change(function(){  
  
    $.get({  
        url: '<c:url value="/cliente/loadCidadesPorEstado/"/>'+$("#clienteEstado").val(),  
        dataType: 'json',  
        data: '{cidade.idEstado}',  
                          
        success: function(data) {  
            alert("Funcionou o AJAX: "+data.cidade.descricao);  
        },  
        error: function(XMLHttpRequest, textStatus, errorThrown) {  
            alert("Deu erro: "+textStatus);  
        },                    
    });  
  
});
#2