Autor: Rafael Martin - rafa_40005@hotmail.com
Buscar registros do banco de dados sem recarregar a página e sem usar AJAX
Neste artigo vou apresentar como trazer dados do banco sem recarregar a página e sem usar AJAX, após selecionar um registro na combobox. É um recurso que, particulamente, uso bastante, mas é pouco utilizado na área e no mercado.
Chega de papo e vamos ao que interessa. Crie um arquivo chamado default.asp.
Abaixo comento toda a programação, para que você entenda todas as etapas do código. O artigo será a partir do código.
<%
'----------------------------------------------------------------------
'Aqui vamos estabelecer conexão com o banco de dados
Dim oConn, oRS, sql
Set oConn = Server.CreateObject("ADODB.Connection")
oConn.Open "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" & Server.MapPath("banco.mdb")
'----------------------------------------------------------------------
%>
<form name="frmMain" id="frmMain" method="post">
<table border="0" cellpadding="2" cellspacing="0" align="center">
<tr>
<td>
Nome:
</td>
<td>
<!-- A função sel_nome() que chamamos no onchange é onde está o grande segredo -->
<select name="cmbNome" id="cmbNome" onChange="sel_nome();">
<option value="0">- -</option>
<%
'---------------------------------------------------------------------- 'Aqui vamos trazer os dados do banco
sql = "SELECT id, nome, telefone, email FROM tb_dados order by nome"
set oRS = oConn.execute(sql)
'----------------------------------------------------------------------
'Agora nós vamos ler todas as linhas (registros) que temos no banco
while not oRS.EOF
%>
<!-- --------------------------------------------------------------------------------------------------- -->
<!-- Atenção! Reparem que no valeu da combo existe 0, 1, 2 e 3. Eles representam a coluna do banco de cada campo no banco. Sempre devemos começar contando do zero, já que estamos trabalhando com vetor. -->
<option value="<%Response.Write(oRS(0) & "|" & oRS(1) & "|" & oRS(2) & "|" & oRS(3))%>">
<!-- Aqui é exibido o conteúdo da coluna 1, que é o campo nome. -->
<%=oRS(1)%>
</option>
<%
oRS.MoveNext
wend
oRS.close
set oRS = nothing
%>
</select>
</td>
</tr>
<tr>
<td>
Telefone:
</td>
<td>
<input type="text" name="telefone" value="" >
</td>
</tr>
<tr>
<td>
Email:
</td>
<td>
<input type="text" name="email" value="" >
</td>
</tr>
</table>
</form>
<script>
/* Aqui é que está o grande segredo */
function sel_nome()
{
// Primeira coisa: Se vocês repararem no código fonte da página, vão reparar que o valeu da combo está desta forma:
//<option value="1|rafael|93442001|rafa_40005@hotmail.com">
//<option value="2|testeRafael|55555555|testerafael@ig.com.br">
// Com os valores do banco de dados.
// E se vocês perceberem, vão ver também que aparecem 2 combos. Isso porque existem duas linhas no banco, ou seja, se tivesse 100 linhas no banco, teria 100 combos no código fonte da página.
var arr = new String(frmMain.cmbNome.value); // Vamos dar um split para pegarmos os valores que estão no valeu da combo
// Como vocês podem ver na linha abaixo
arr = arr.split('|');
// Nós pegamos os registros, pertencente àquele nome que você selecionou na combo.
// Prestem atenção que estamos chamando ARR de 2 e ARR de 3.
// Como trabalhamos com vetor, começamos do 0. Se vocês contarem os valores que estão dentro do valeu da combo, vejam que o campo telefone está na posição 2 e o campo email está na posição 3.
frmMain.telefone.value = arr[2];
frmMain.email.value = arr[3];
// Lembrem-se: o nome do campo (input) e o nome do form na página devem estar iguais ao campo que você chama na função GavaScript.
// Como aqui
frmMain.telefone.value = arr[2];
}
</script>
Bom, é isso, espero que tenha sido útil!
Abraços!
