Distribuindo valores recebidos de uma consulta com Ajax

[.Andreia.]

Montei um exemplo simples de como fazer para distribuir os dados vindo do Ajax aos campos existentes no formulário.

Aqui não explicarei como é feita a parte do Ajax pois no fórum já tem bastante exemplos. Estou partindo do ponto em que vocês recebem os dados do Ajax.

Observações:

1) o retorno do ajax tem que vir em uma estrutura similar a um array. Como fazer isso? Lá na página onde voces fazem a busca no banco de dados tem o resultado da pesquisa certo? É só imprimir o resultado com as separações para a função javascript saber dividí-las.

2) Como é um exemplo, coloquei fixo a variavel Retorno, mas ela deve vir do Ajax. Exemplo:

SetaCampos(xmlHttp.responseText);

3) Os campos que devem receber valores precisam conter um ID igual, como no exemplo "grupo". 4) O array de retorno deve estar na ordem de exibição dos campos, exemplo: "primeiro_valor|segundo_valor|terceiro_valor". Ou seja, a ordem em que os campos do grupo estao sendo exibidos. Sugestão: O exemplo usa o ID para apontar quais campos receberão valores. Isso quando a aplicação recebe campos no meio que não receberam - como no exemplo o campo 3. Uma sugestao para quando voces não tiverem esta situação, é envolver todos os campos dentro de uma DIV. Exemplo de aplicação: Para voces terem ideia aonde isso pode ser aplicado, imaginem aquelas buscas de endereço onde digita-se o CEP e retornam os dados (Endereço, número, cidade, estado) e cada campo receba seu valor. Navegadores: Testado e funcionando no IE 7 e Firefox 2.0.0.14 Código:

<script language="JavaScript">
function SetaCampos(Retorno) {
var frm = document.frm.grupo;
var TotalElementos = frm.length;
var ArrayRetorno = Retorno.split("|");

    for (var i=0; i < TotalElementos; i++)
    {
            frm[i].value = ArrayRetorno[i];
    }
}
</script>

<form name="frm">
Campo1:<input type="text" name="campo1" id="grupo">

Campo2:<input type="text" name="campo2" id="grupo">

Campo3:<input type="text" name="campo3">

Campo4:<input type="text" name="campo4" id="grupo">

Campo5:<input type="text" name="campo5" id="grupo">

<input type="button" value="Buscar" onclick="SetaCampos('valor1|valor2|valor3|valor4')">
</form>

Qualquer dúvida, crítica, elogio ou sugestão.... só postar ;)