AJAX Atualizando várias DIVS com AJAX utilizando POST

[jonatantorres 0]

Boa tarde a todos.

Estou precisando de uma ajuda, procurei na internet e não achei nada relativo ao meu problema, então resolvi recorrer ao iMasters.

Já adianto que sou BEM iniciante em Javascript, então se eu cometer algumas gafes, me perdoem.

Fazendo uma breve introdução ao meu problema, preciso alterar mais de uma DIV ao mesmo tempo com valores independentes via AJAX utilizando jQuery. Mas meus dados não estão na página, então precisaria utilizar uma requisição POST.

O problema é que, na utilização de POST, não encontrei uma maneira de atualizar mais de uma DIV com valores diferentes fazendo apenas uma requisição.

Não estou conseguindo colocar imagens para ilustrar melhor o problema, mas vou tentar fazer um esquemático.

Ao clicar em calcular, eu preciso que ele utilize o valor do textBox A e atualize a <DIV> ao lado, utilize o valor do textBox B e atualize a <DIV> ao lado e a mesma coisa para C.

legenda: [ ] = textbox ( ) = botão

Como está ficando:

A [ 50 ] 50

B [ 60 ] 50

C [ 20 ] 50

(CALCULAR)

Como deveria ficar:

A [ 50 ] 50

B [ 60 ] 60

C [ 20 ] 20

(CALCULAR)

Mas eu preciso que isso seja feito por POST, porque, num caso real, esses valores dos textbox seriam tratados com informações do banco e nas divs ao lado viriam informações que são fruto dessa combinação (do valor do textbox com informação do banco). Repeti os valores do textbox apenas para facilitar a visualização do problema.

Para atualizar os valores direto da página, consegui atualizar as 3 divs sem problemas. Mas tentando utiizar Post, não consegui pensar numa forma mais correta para fazer isso.

Minhas alternativas foram:

1 - Fazer 3 requisições (pra mim, a pior ideia hehehe)

2 - trazer uma string com os 3 valores e tratar no retorno (também não parece o ideal)

Gostaria de saber se existe uma maneira mais eficiente. Finalmente, vamos aos códigos:

função na página:

legenda:

#calc = id do botão

post.jsp = página do post

#a = id do textbox a

#valorA = id da div onde deve ser inserida a informação do valor A

#valorB = id da div onde deve ser inserida a informação do valor B

#valorC = id da div onde deve ser inserida a informação do valor C

$( "#calc" ).click(function() {
 
$.post("post.jsp", {a: $('#a').val()}, function( data ){
 
$("#valorA").text(data);
$("#valorB").html(data);
$("#valorC").html(data);
 
});
 
});
 

POST:

<% String a = request.getParameter("a");
response.getWriter().print(a);%>
 

Alguma maneira de resolver isso de forma eficiente?

Muito obrigado!

[William Bruno 1501]

o correto é retornar um json:

$("#valorA").text(data.valorA);
$("#valorB").html(data.valorB);
$("#valorC").html(data.valorC);

o json seria algo assim:

{
  "valorA": "xxxxx",
  "valorB": "yyyyy",
  "valorC": "bbbbb"
}

[jonatantorres 0]

Muito obrigado, William. Acho que agora vai!! hehehe