[RESOLVIDO] jQuery + Ajax + Servlet

15 respostas
jeovane.reges
Olá a todos, boa noite. Pessoal tenho uma página que é composta por: topo, menu esquerdo e meio. Onde a parte do meio é composta por um textarea. Nesta parte (meio) desejo que atualizações sejam realizadas após ser dado um submit na página. Para tal, estou usando jQuery + Ajax + Servlet Sendo assim, meus código em jQuery + Ajax ficaram da seguinte maneira abaixo.
// Preencho os menus inputMenu e inputSubMenu
var menu = [],
subMenu = [],
inputMenu = [],
inputSubMenu = [];
$(".conteudoMenu a").click(function(){
    menu.push($(this).parent(".conteudoMenu").parent("li").find(".itemMenu").attr("id"));
    subMenu.push($(this).attr("id"));

    // Adiciona os valores aos arrays dos inputs @id=menu e @id=subMenu.
    inputMenu.push($("form[name=valueArrays] input[id=menu]").val(_.intersection(itensMenu, menu)));
    inputSubMenu.push($("form[id=valueArrays] input[id=subMenu]").val(subMenu));

});

// Ação que deve acontecer depois que o meu botão for pressionado
$("#submitValuesMenu").click(function(){ 
    if(inputMenu.length > 0){
        $.ajax({
            url: "ObtainsValuesMenu",
            type: "POST",
            data: {
                "menu":inputMenu,
                "subMenu":inputSubMenu
            },
            error:function(){
                alert("ERRO MENU")
            },
            success:function(data){
                $("textarea[id=assembleQuery]").text(data); // Textarea no qual desejo que as atualizações apareçam
            }
        });
    }
});
O meu Servlet estar da seguinte maneira abaixo
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
    // Obtém os valores vindo do meu código jQuery + Ajax
    String[] menu = request.getParameterValues("menu[]");
    String[] subMenu = request.getParameterValues("subMenu[]");
    
   // TEM MAIS CÓDIGO MAS, PRA RESUMIR DEIXEI APENAS ESSE TRECHO

    request.setAttribute("query", query);
    RequestDispatcher rd = request.getRequestDispatcher("/page-loaded-ontology.jsp");
    rd.forward(request, response);
}
Meu textarea ta da seguinte maneira
<textarea id="assembleQuery" name="assembleQuery">${query}</textarea>
Meu formulário encontra da seguinte maneira abaixo.
<form name="valueArrays" id="valueArrays" action="assembles-query" method="post">
    <input type="hidden" id="menu" name="menu[]" value="" />
    <input type="hidden" id="subMenu" name="subMenu[]" value="" />
    <input type="hidden" id="domainOntology" name="domainOntology" value="${domainOntology}" />
    <input type="submit" name="submitValuesMenu" id="submitValuesMenu" value="Gravar" />
</form>
Por fim, meu web.xml estar da seguinte maneira abaixo.
<servlet>
    <servlet-name>ObtainsValuesMenu</servlet-name>
    <servlet-class>
        myexample.servlet.ObtainsValuesMenuServlet
    </servlet-class>
</servlet>

<servlet-mapping>
    <servlet-name>ObtainsValuesMenu</servlet-name>
    <url-pattern>/assembles-query</url-pattern>
</servlet-mapping>
No entanto, da maneira que se encontra o meu código além de redirecionar a minha página não atualiza o conteúdo do meu textarea. Alguém saberia me dizer aonde que estou errando e o que posso fazer pra consertar esse erro? Desde de já obrigado pela ajuda de todos.

15 Respostas

W

Olá jeovane.reges,
estou exatamente com o mesmo problema, vc conseguiu resolver ?

jeovane.reges

Olá wjava, conseguir sim resolver o problema.
Posta se código pra que eu possa lhe ajudar.

kadu.m.lino

se vc está dando um submit, ele não vai ler o seu ajax… vai redirecionar direto para essa action “assembles-query”

tenta explicar sua necessidade, assim conseguimos ajuda - lo melhor… mas o problema do redirecionamento é esse

jeovane.reges

kadu.m.lino, eu já conseguir solucionar esse problema.
O wjava que estar com um problema semelhante, então, pedi pra que ele postasse o código dele pra que pudéssemos ajuda-lo.

kadu.m.lino

o problema era esse msm?

jeovane.reges

Era algo por ai sim :slight_smile: kadu.m.lino
O resolvi alterando o servlet e o código em ajax.

W

abaixo meu ajax

function logar() {
		$.ajax({
            url: "AutenticarUsuarioServlet",
            type: "POST",
            data: "login=" + $("#txtLogin").val() + "&senha="+ $("#txtSenha").val(),
            success: function(form){
                $("#divConteudo").html(form);
            }
        });

no servlet eu faço o login e então abre a página normalmente dentro da div que eu quero.
meu problema é quando o usuário coloca login, senha errados ou em branco que eu ao invéz de trazer a página, trago apenas uma mensagem de erro no request.getpamater.

Basicamente então o que quero é, se login e senha forem corretos, continua fazendo o que faz, se for errado, mostra a mensagem enviada por:

request.setAttribute("msgerro", "Login/Senha não preenchido.");
jeovane.reges

Altere o seu código em Ajax para:

function logar() {
		$.ajax({
            url: "AutenticarUsuarioServlet",
            type: "POST",
            data: "login=" + $("#txtLogin").val() + "&senha="+ $("#txtSenha").val(),
            // Removi o "form" e coloquei "responseText".
            success: function(responseText){
                $("#divConteudo").html(responseText);
            }
        });

No seu Servlet remova a linha request.setAttribute(“msgerro”, “Login/Senha não preenchido.”);
E coloque o seguinte.

response.setContentType("text/plain");
response.setCharacterEncoding("UTF-8");
response.getWriter().write("Login/Senha não preenchido.");

Veja se o resultado é o que você deseja agora.

W

jeovane.reges

deu certo, era exatamente o que você disse.
Mas agora me ocorreu outra dúvida:
quando dá tudo certo quero que a resposta apareça em divConteudo, como abaixo

$.ajax({
            url: "AutenticarUsuarioServlet",
            type: "POST",
            data: "login=" + $("#txtLogin").val() + "&senha="+ $("#txtSenha").val(),
            success: function(responseText){
                $("#divConteudo").html(responseText);
            }
        });

Mas como foça pra direcionar, se for a resposta que eu espero, aparece em divConteudo, se não, como no caso de login e senha vazio, numa outra div, como próximo à div de login e senha por exemplo

jeovane.reges

Deixa eu ver se entendi.
Se der certo o login, você quer que o usuário seja redirecionado pra uma outra página, correto?

Caso os dados esteja errado, que apareça a mensagem de erro.

Seria isso?

W

Na verdade não, mas já resolvi, enchi o javascript de de if e else para, se der erro de login mostre na div de erro, senão mostre na div original. Assim:

$.ajax({
            url: "AutenticarUsuarioServlet",
            type: "POST",
            data: "login=" + $("#txtLogin").val() + "&senha="+ $("#txtSenha").val(),
            success: function(responseText){
            	if (responseText=="Login/Senha não preenchido.") {
            		$("#resposta").html(responseText);
				} else if(responseText=="Usuário ou senha inválido."){
            		$("#resposta").html(responseText);
				} else if(responseText=="Senha Não Confere."){
            		$("#resposta").html(responseText);
				}
            	else {
					$("#divConteudo").html(responseText);
				}
            }
        });

se a resposta for “Login/Senha não preenchido.”, “Usuário ou senha inválido.” ou “Senha Não Confere.”, responde dentro da div de id=“resposta”, que posicionei acima do campo login, caso contrário, a resposta é colocada na div de id=“divConteudo”, que posicionei abaixo de tudo isso. Achei que ficou feio esse monte de if e else e as strings originais de resposta, mas, mas pelo menos funcionou e meu conhecimento de javascript não me permite melhorar isso.

kadu.m.lino

Pode fazer assim:

$.ajax({  
    url: "AutenticarUsuarioServlet",  
    type: "POST",  
    data: "login=" + $("#txtLogin").val() + "&senha="+ $("#txtSenha").val(),  
    success: function(responseText){  
    if (responseText=="Login/Senha não preenchido." || responseText=="Usuário ou senha inválido." || responseText=="Senha Não Confere.") {  
       $("#resposta").html(responseText);  
    } else {  
       $("#divConteudo").html(responseText);  
    }
 });

ou dependendo do que vem no responsText:

$.ajax({  
    url: "AutenticarUsuarioServlet",  
    type: "POST",  
    data: "login=" + $("#txtLogin").val() + "&senha="+ $("#txtSenha").val(),  
    success: function(responseText){  
    if (responseText==outraValorQueSeraSetadoNoDivConteudo") {  
        $("#divConteudo").html(responseText);  
    } else {  
        $("#resposta").html(responseText);  
    }    
 });

Ou melhor ainda… jogar o conteúdo do success em uma função… ficaria melhor pra ler!

abrass

jeovane.reges

wjava, acho que solução proposta pelo kadu.m.lino é mais elegante. Não tem como adapta-la a sua necessidade?

W

trocar os if´s por ou lógico é mais rápido para ser processado, apesar de pouco diferir na legilibilidade.
Ontem quando gerei essa solução, a primeira ideia foi usar ou lógico, mas deu um erro e então transformei em if´s por ser mais legível.
Mas agora que está funcionando e entregue, vou fazer essa alteração para melhoria e desempenho.
Obrigado kadu, obrigado reges.

Reges, muda o assunto do tópico pra resolvido.

jeovane.reges

Que ótimo que conseguiu resolver o seu problema wjava.
Status do tópico alterado :wink:

Criado 22 de janeiro de 2013
Ultima resposta 6 de fev. de 2013
Respostas 15
Participantes 3