Javascript y bases de datos

[VadTepes]

Hola, tengo un formulario que se debe llenar, pero los datos que se llenan pueden ser tomados de una base de datos; mi pregunta es: como puedo hacer esto, es decir lo mismo que hace GMail para el llenado de las direcciones cuando se agrega el destiantario.

Espero me puedan mostrar unpoco de el codigo la base de datos es mysql


Gracias

[JavierB]

Hola VadTepes. Bienvenido al foro.

Solo con JavaScript no puedes. Para manejar una base de datos (leer, borrar, editar...) necesitas un lenguaje del lado del servidor. Para MySQL seguramente prefieras PHP (aunque podría ser algún otro). Averigua que lenguaje soporta tu servidor y algún moderador moverá el mensaje al foro correspondiente.

Saludos,

[caricatos]

Hola:

Me parece que lo que necesitas es la tecnología ajax... se trata de hacer peticiones sin recargar la página.

Saludos

[efra]

Difiero:

JavaScript por si solo no puede ser un origen de datos pero con AJAX se puede emular una base de datos en base a un array.

ejemplo:
Los datos en un array JavaScript:

Código PHP:

  var jsData = new Array( );
jsData[0] = {nombre:"Juan", anio:1930, pais:"Uruguay",
edad:42,
reside:"Argentina", hijos:2};
jsData[1] = {nombre:"Pablo", anio:1934, pais:"Italia",
edad:24,
reside:"Japon", hijos:1};
jsData[2] = {nombre:"Pedro", anio:1938, pais:"Italia",
edad:49,
reside:"Hungria", hijos:2};
jsData[3] = {nombre:"Luis", anio:1950, pais:"Uruguay",
edad:34,
reside:"USA", hijos:1};
jsData[4] = {nombre:"Fer", anio:1954, pais:"Alemania", edad:90,
reside:"Espania", hijos:2}; 
   

Una simple tabla HTML:

Código PHP:

  <table id="veteranos">
<thead>
<tr><th>anio</th>
<th>Pais</th>
<th>Origen</th>
<th>Reside En</th>
<th>Hijos</th>
</tr>
</thead>
<tbody id="matchData"></tbody>
</table> 
   

y una parser de datos JavaScript:

Código PHP:

  function drawTable(tbody) {
var tr, td;
    tbody = document.getElementById(tbody);
    
    for (var i = 0; i < jsData.length; i++) {
        tr = tbody.insertRow(tbody.rows.length);
        td = tr.insertCell(tr.cells.length);
        td.setAttribute("align", "center");
        td.innerHTML = jsData[i].anio;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = jsData[i].pais;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = jsData[i].pais;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = jsData[i].reside;
        td = tr.insertCell(tr.cells.length);
        td.setAttribute("align", "center");
        td.innerHTML = jsData[i].hijos;
    }
} 
   

todo esto lo mandamos llamar en el evento OnLoad del Body:
drawTable("matchData");

Y listo!.
Es un quick & dirty.

Chequen mi tutorial de AJAX en mi site que esta hecho completamente con

http://www.fuenteria.com/?external=35

[Viet]

Efra!... muy bueno!!!!

ahora tienes un metodo para que llene una tabla dinamicamente segun la composición del array, o mejor de un xml?..... Estaria muy bueno tener una funcion Js que lea un xml (cualquiera )y genere una tabla con esos datos.

en fin... muy bueno ! saludos

[efra]

De hecho, Viet, si la tengo y parte de la misma funcionalidad expuesta anteriormente pero con algunos pequeños cambios.

Vamos a sustituir la función var jsData = new Array( ); por la rutina AJAX de tu preferencia que devuelva el XML con esta estructura:

Código PHP:

  <xml id="msxml" style="display:none">
<worldcup>
<final>
<location>Uruguay</location>
<year>1930</year>
<winner>Uruguay</winner>
<winscore>4</winscore>
<loser>Argentina</loser>
<losscore>2</losscore>
</final>
<final>
<location>Italia</location>
<year>1934</year>
<winner>Italy</winner>
<winscore>2</winscore>
<loser>Czechoslovakia</loser>
<losscore>1</losscore>
</final>
</worldcup>
</xml> 
   

Esta rutina deve devolver un objeto llamado xDoc

Posteriormente vamos a modficar la función drawTable(tbody) por lo siguiente:

Código PHP:

  function drawTable(tbody) {
var tr, td, i, j, oneRecord;
tbody = document.getElementById(tbody);
// nodos del arbol xml
var data = xDoc.getElementsByTagName("worldcup")[0];
// esto es para cuestiones de css del TD, no lo uso
//var classes = ["ctr","","","","ctr"];
for (i = 0; i < data.childNodes.length; i++) {
//IMPORTANTE, brincarse este nivel para Netscape, aún investigo por que
    if (data.childNodes[i].nodeType == 1) {
       // nuestro registro
        oneRecord = data.childNodes[i];
        tr = tbody.insertRow(tbody.rows.length);
        td = tr.insertCell(tr.cells.length);
        //td.setAttribute("class",classes[tr.cells.length-1]);
        td.innerHTML =oneRecord.getElementsByTagName("year")[0].firstChild.nodeValue;
        td = tr.insertCell(tr.cells.length);
        //td.setAttribute("class",classes[tr.cells.length-1]);
        td.innerHTML =oneRecord.getElementsByTagName("location")[0].firstChild.nodeValue;
        td = tr.insertCell(tr.cells.length);
        //td.setAttribute("class",classes[tr.cells.length-1]);
        td.innerHTML =
        oneRecord.getElementsByTagName("winner")[0].firstChild.nodeValue;
        td = tr.insertCell(tr.cells.length);
        //td.setAttribute("class",classes[tr.cells.length-1]);
        td.innerHTML =
        oneRecord.getElementsByTagName("loser")[0].firstChild.nodeValue;
        td = tr.insertCell(tr.cells.length);
        //td.setAttribute("class",classes[tr.cells.length-1]);
        td.innerHTML =oneRecord.getElementsByTagName("winscore")[0].firstChild.nodeValue +" - " + oneRecord.getElementsByTagName("losscore")[0].firstChild.nodeValue;
    }
}
} 
   

Este es otro ejemplo por eso hablo de la copa mundial.


Y la ejecución con el evento body:drawTable('matchData')

Y listo.

Precisamente este tutorial lo estoy armando en mi site.

La primera parte aqui :http://www.fuenteria.com/?external=35

www.fuenteria.com hecho con

[Viet]

Esta claro que el metodo sirve tanto para xml o como para un array de js. Mi consulta apuntaba mas a utilizarlo de forma independiente del contenido del xml, y creo que no me he sabido expresar bien.
Veamos vos estas usando el titulo de las columnas para moverte dentro del xml o bien del array. lo que yo planteaba era armar dinamicamente la tabla a partir del formato recibido.
Por ejemplo recibir un xml de empleados con (apellido, nombre, id , etc) y luego otro con autos(modelo, marca, etc) y que ambos xml`s sean interpretados por la misma funcion, donde esta cree las grillas correspondientes.

Mas alla de mi planteo tu codigo esta muy bueno y lo estoy usando en parte para armar la grilla_dinamica si me esperan unos dias la comparto con ustedes

saludos

[sintesk7]

felicidades Efrain por tan excelentes códigos, y tambiñen a Viet por por su idea de la grilla_dinámica.

Esperaré impaciente tu post!

Saludos

[dunete]

no se si voy a meter la pata preguntando esto ;)

he visto que esto se usa para arrays bastante limitados. Yo tengo una base de datos muy amplia que gestiono con el phpmyadmin, pero por circunstancias, me gustaria acceder a ella desde javascript o desde algo que pueda interpretarse en un HTML