Enviar valores para Servlet via Ajax

11 de fevereiro de 2013 11 respostas

jeovane.reges 11 de fevereiro de 2013

Olá a todos, boa noite. Pessoal, tenho uma função que simula um "Map", onde adiciono como "Key" os item do menu e como "Values" os subitens do menu. Essa função pode ser visualizada abaixo ou visualizada e testada nesse link http://jsfiddle.net/Aw927/

// Pega os valores dos subitens dos menus de acordo com o itens que o usuário for clicando.
var key;
var value;
var mapaDeListas = new Array();
$(".conteudoMenu a").click(function(){
    key = $(this).parent(".conteudoMenu").parent("li").find(".itemMenu").attr("id");
    value = $(this).attr("id"); 

    Processar();
    // Exibe os valores que foram clicados
    console.log(mapaDeListas);
});

var Processar = function() {
    if (mapaDeListas[key] && $.inArray(value, mapaDeListas[key]) == -1 || mapaDeListas[key] && $.inArray(value, mapaDeListas[key]) != -1) {
        // Verifica se já existe a chave vinda do "key" e se o valor de "value" está presente no array
        if (mapaDeListas[key].indexOf(value) == -1){
            mapaDeListas[key].push(value);
        }
    }
    else {
        // Cria o array de acordo com o valor da "key" e adiciona o valor de "value"
        mapaDeListas[key] = new Array();
        mapaDeListas[key].push(value);
    }
}

O que eu gostaria de saber era como que faço para passar os valores dessa função em Ajax para um Servlet e através deles montar um Map em java. Tentei enviar os valores dessa função via Ajax da seguinte maneira abaixo, porém sem sucesso

function loadQuery(){
    if(inputMenu.length > 0){
        $.ajax({
            url: "assembles-query",
            type: "POST",
            data: {
                "mapaDeListas[]" : mapaDeListas
            },
            //dataType: "json",
            error:function(){
                alert("ERRO MENU")
            },
            success:function(responseText){
                $("textarea[id=assembleQuery]").text(responseText);
            }
        });
    }
}

No Servlet, tentei pegar o resultado da seguinte maneira [color=green]String[] mapaDeListas = request.getParameterValues("mapaDeListas[]");[/color] Porém quando mando imprimir o resultado sempre é retornado null .

Alguém saberia me dizer onde que estou errando e o que devo fazer para passar esses valores corretamente?
Desde de já obrigado pela ajuda de todos.

Abaixo tem um print de como os resultado são armazenados.
[img]https://dl.dropbox.com/u/19076387/result-send.png[/img]

11 Respostas

charles.eduardo 11 de fev. de 2013

jeovane.reges eu posso não estar completamente correto em minha colocação pode haver tambem outras maneiras. Fiz um projeto e utilizei o $.ajax sem o data passando os parametros diretos na url no meu caso deu certo espero que possa ajudar-lhe.

$.ajax({ type: "post", url: "assembles-query?valor="+$(this).val(), success: function(result){ .... } });

jeovane.reges 11 de fev. de 2013

Olá charles.eduardo, obrigado pela ajuda.
E como que você fez para receber esses valores no [b]Servlet[b]?

É possível obte-los pelo [b]request.getParameterValues()[b]?
Obrigado.

jeovane.reges 11 de fev. de 2013

Olá charles.eduardo, obrigado pela ajuda.
E como que você fez para receber esses valores no Servlet?

É possível obte-los pelo request.getParameterValues()?
Obrigado.

davidbuzatto 11 de fev. de 2013

Ao invés de codificar os valores na URL, vc pode usar o atributo “data” da função $.ajax, ainda mais por estar usando “post”. O jQuery vai fazer o que for necessário para enviar os dados.

$.ajax({ type: "post", url: "assembles-query", data: { p1: "aaa", p2: "bbb" }, success: function(result){ .... } });

No servet mapeado em “assembles-query” você obterá os valores de p1 e p2 usando o método getParameter do objeto request. Os nomes p1 e p2 você pode trocar pelo o que quiser.

String v1 = request.getParameter( "p1" ); String v2 = request.getParameter( "p2" ); // v1 contém "aaa" e v2 contém "bbb"

É claro, os valores de p1 e p2 na invocação da função $.ajax você vai definir a partir de algo que precisa, por exemplo, o valor que vem de um campo.

jeovane.reges 11 de fev. de 2013

Olá davidbuzatto, obrigado pela ajuda.

Ao invés de codificar os valores na URL, vc pode usar o atributo "data" da função $.ajax, ainda mais por estar usando "post". O jQuery vai fazer o que for necessário para enviar os dados.

Já estou fazendo, no entanto, da maneira que estou fazendo não é passado nenhum valor. Tento fazer da seguinte maneira abaixo

function loadQuery(){
    if(inputMenu.length > 0){
        $.ajax({
            type: "POST",
            url: "assembles-query",
            data: {
                "mapaDeListas[]" : $("input[id=mapMenu]").val()
            },
            error:function(){
                alert("ERRO MENU")
            },
            success:function(responseText){
                $("textarea[id=assembleQuery]").text(responseText);
            }
        });
    }
}

mapaDeListas é um Array que utilizo para armazenar alguns valores que são clicados no menu. Onde, estes por sua vez são adicionados no meu input mapMenu[color=red] [/color] após passarem por algumas regras na minha função Processar(); Essa minha função estar definida abaixo.

// Pega os valores dos subitens dos menus de acordo com o itens que o usuário for clicando.
var key;
var value;
var mapaDeListas = [];
var mapMenu = [];
$(".conteudoMenu a").click(function(){
    key = $(this).parent(".conteudoMenu").parent("li").find(".itemMenu").attr("id");
    value = $(this).attr("id"); 

    Processar();
    // Criei um input onde vou armazenando os valores que são passado para o mapaDeListas
    mapMenu.push($("form[name=valueArrays] input[id=mapMenu]").val(mapaDeListas));
    // Chamo a função que envia os dados via Ajaz
    loadQuery()
});

var Processar = function() {
    if (mapaDeListas[key] && $.inArray(value, mapaDeListas[key]) == -1 || mapaDeListas[key] && $.inArray(value, mapaDeListas[key]) != -1) {
        // Verifica se já existe a chave vinda do "key" e se o valor de "value" está presente no array
        if (mapaDeListas[key].indexOf(value) == -1){
            mapaDeListas[key].push(value);
        }
    }
    else {
        // Cria o array de acordo com o valor da "key" e adiciona o valor de "value"
        mapaDeListas[key] = new Array();
        mapaDeListas[key].push(value);
    }
}

No entanto, da maneira que meu código se apresenta quando chamo o valor da variável mapaDeListas[] ele imprime apenas algo vazio/branco. Faço a chamada no servlet da seguinte maneira abaixo

String[] mapaDeListas = request.getParameterValues("mapaDeListas[]");

Abaixo tem uma saída do console.log(mapaDeListas). [img]https://dl.dropbox.com/u/19076387/result-send.png[/img]

Como pode ser visto na imagem do console para cada item do menu tenho alguns subitens atrelados aos mesmo.
O que eu gostaria era de passar esses valores para o Servlet da seguinte maneira {Disease:["name"], Drug:["name", "metabolism"], Ingrediente:["name"]}

Só que não estou conseguindo :(
Sabe me dizer o que devo fazer para alcançar esse meu objetivo?
Obrigado.

davidbuzatto 11 de fev. de 2013

Para falar que algo é um array, os colchetes vão depois, não antes. Algo como:

data: { mapaDeListas: [ "elemento1", "elemento2", "elemento3" ] }
Você provavelmente precisará de uma função que será invocada, gerando o array, algo assim:

data: { mapaDeListas: fundaoQueGeraArray() } ... function funcaoQueGeraArray() { return [ "elemento1", "elemento2", "elemento3" ]; }

jeovane.reges 11 de fev. de 2013

Olá davidbuzatto, bom dia.
Sabe me dizer o que devo alterar em minha função pra alcançar isso que você falou?

Já tem uns três dias que bato cabeça com esse problema e não consigo sair do local onde estou
Mais uma vez, obrigado pela ajuda.

davidbuzatto 11 de fev. de 2013

Na função você vai pegar os valores que quer, colocar num array e retornar.
O retorno será usado como valor do parâmetro data da função $.ajax

jeovane.reges 11 de fev. de 2013

davidbuzatto:
Na função você vai pegar os valores que quer, colocar num array e retornar. O retorno será usado como valor do parâmetro data da função $.ajax

Olá davidbuzatto. Fiz algumas alterações no código, creio que essas que você citou. Porém, ainda continua não dando certo. A função para gerar os Arrays encontra-se da seguinte maneira.

var mapaDeListas = new Array();
function generatingFunctionArray() {
    if (mapaDeListas[key] && $.inArray(value, mapaDeListas[key]) == -1 || mapaDeListas[key] && $.inArray(value, mapaDeListas[key]) != -1) {
        // Verifica se já existe a chave vinda do "key" e se o valor de "value" está presente no array
        if (mapaDeListas[key].indexOf(value) == -1){
            mapaDeListas[key].push(value);
        }
    }
    else {
        // Cria o array de acordo com o valor da "key" e adiciona o valor de "value"
        mapaDeListas[key] = new Array();
        mapaDeListas[key].push(value);
    }
    return mapaDeListas;
}

O local onde pego os cliques no menu estar da seguinte maneira abaixo.

var key,
value,
mapMenu = new Array();
$(".conteudoMenu a").click(function(){
    key = $(this).parent(".conteudoMenu").parent("li").find(".itemMenu").attr("id");
    value = $(this).attr("id"); 

    mapMenu = generatingFunctionArray();
    // Função que envia os dados via .$ajax
    loadQuery();
});

Já a função que envia os dados para o Servlet, estar da seguinte maneira abaixo.

function loadQuery(){
    $.ajax({
        type: "POST",
        url: "assembles-query",
        data: {
            "mapaDeListas[]" : mapMenu
        },
        error:function(){
            console.log("ERRO MENU");
        },
        success:function(responseText){
            $("textarea[id=assembleQuery]").text(responseText);
        }
    });
}

Para pegar os dados no Servlet estou fazendo da seguinte maneira abaixo.

String[] mapaDeListas = request.getParameterValues("mapaDeListas[]");

Quando mando percorrer esse Array no Servlet sempre é retornado no console java.lang.NullPointerException Sei que erro ocorre porque nada estar sendo passado.

for (int i = 0; i < mapaDeListas.length; i++) {
   System.out.println(mapaDeListas[i]);
}

Então, o que estar errado agora? Mais uma vez, obrigado pela ajuda. :)

jeovane.reges 11 de fev. de 2013

Olá davidbuzatto, boa tarde.
Fazendo uns testes aqui notei que caso eu passe o valor da Key na função data do Ajax ele envia os valores.

data: { mapaDeListas1 : mapMenu["Disease"] },
No entanto, isso não faria muito sentindo uma vez que não tem como setar todos os valores.
Tô pra enlouquecer com isso Kkk…
Então, alguma dica sobre o que devo fazer pra dar mais um passo em busca dessa minha solução?
Obrigado.

jeovane.reges 12 de fev. de 2013

Olá davidbuzatto, boa tarde. Fiz algumas alterações em minha função que gera os Array's e consigo com a mesma enviar valores para o Servlet. Minha função encontra-se da seguinte maneira agora.

var mapaDeListas = {};
var values = [];
function generatingFunctionArray() {
    if (mapaDeListas[key] && $.inArray(value, mapaDeListas[key]) == -1 || mapaDeListas[key] && $.inArray(value, mapaDeListas[key]) != -1) {
        // Verifica se já existe a chave vinda do "key" e se o valor de "value" está presente no array
        if (mapaDeListas[key].indexOf(value) == -1){
            values.push(value);
            mapaDeListas[key] = values;
        }
    }
    else {
        // Cria o array de acordo com o valor da "key" e adiciona o valor de "value"
        mapaDeListas[key] = {};
        values = [];
        values.push(value);
        mapaDeListas[key] = values;
    }
    return mapaDeListas;
}

Para pegar os valores da key e value estou usando a função abaixo, onde além disso, também transformo o retorno da minha função que gera os Arrays em Json

var key,
value,
mapList;
$(".conteudoMenu a").click(function(){
    key = $(this).parent(".conteudoMenu").parent("li").find(".itemMenu").attr("id");
    value = $(this).attr("id"); 

    mapList = JSON.stringify(generatingFunctionArray());
});

Para enviar os valores para o Servlet via Ajax faço o seguinte abaixo

data: { mapaDeListas1 : mapList }

Para receber os dados no Servlet faço o seguinte abaixo.

String[] mapList = request.getParameterValues("mapaDeListas1");

Quando mando percorrer os valores contidos em mapList como abaixo..

for (int i = 0; i < mapList.length; i++) {
    System.out.println(mapList[i]);
    String[] string = mapList[i].split(",");
    //System.out.println(string[i]);
}

Tenho uma saída igual à apresentada abaixo.

{"Disease":["name","class"],"Ingredient":["name"]}

O que eu gostaria de saber agora, é se é possível pegar essa saída e manipula-la de tal maneira que eu possa transformar os valores fora dos colchetes [ ] [color=red](Disease por exemplo)[/color] em Key e os valores dentro dos colchetes pertentes a cada "Key" em um Array e com isso construir um Map da seguinte maneira abaixo.

Map<String, Set<String>> mapAjax = new LinkedHashMap<String, Set<String>>();

Desde de já, mais uma vez obrigado pela ajuda.

Criado 11 de fevereiro de 2013

Ultima resposta 12 de fev. de 2013

Respostas 11

Participantes 3

11 Respostas

Topicos relacionados