Daniel Rozo

Daniel Rozo
C#, XAML, Windows Phone 7 Email Me Hablemos en Twitter! Perfil en LinkedIn Cotillea mi Facebook Suscrbete!
Cmo extraer informacin de base de datos desde #JavaScript con #AJAX a #PHP
POSTED MARZO 26TH, 2012 . 1 COMENTARIO . JAVASCRIPT, PHP, PROGRAMACIN WEB ETIQUETAS: AJAX, JAVASCRIPT, PHP, XML Muy frecuentemente se plantea el caso en el que necesitamos extraer informacin de una base de datos MySQL y trabajar con estos datos en JS/JQuery para representarlos en pantalla. As, pues, es bien sabido que desde JavaScript solo no podemos hacer esto, puesto que se ejecuta del lado del cliente; pero contamos con un sencilla y muy efectiva ayuda: peticiones asncronas a PHP, que s puede operar con la BBDD. Hoy un amigo me ha planteado la duda, y como hace mucho no escriba, he decidido aprovechar la entrada para dedicrsela y hacer un minitutorial adaptado a su caso especfico; como siempre, si tenis alguna duda, estn los comentarios o en @DanielRozo_ . Al lo: tenemos una pgina simple con un formulario en el que introducimos el DNI y necesitamos conectar a la BBDD para obtener el nombre correspondiente a ese DNI y asignarlo al value de un TextBox. 1 <!DOCTYPE html> 2 3 <html> 4 <head> 5 <title>Primer Prototipo</title> 6 7 </head> 8 9 <body> 10 11<form name="formulario" method="post" 12onsubmit="leerDNI(document.formulario.dni.value);"> 13 14<p>Insertar Datos personales</p> <p>Nombre <input type="text" name="nombre" id="dni" 15placeholder="Nombre"/></p> 16 <p>DNI <input type="text" name="dni" required id="name" 17placeholder="DNI"/></p> 18 <p><input type="submit" value="Enviar"/></p>
19 20</form> 21 22</body> </html> 23 Si os dais cuenta, el submit del formulario pasa por la funcin leerDNI(string) y dems funciones que la ayudan que habr que construir: 1 2 3 function leerDNI(dni){ 4 5 var params="dni="+dni; 6 downloadUrl(params,"genxml.php", function(data) { 7 var xml = parseXml(data); 8 var dnis = xml.documentElement.getElementsByTagName("dni"); //por si 9 queremos coger incluso varios, aunque no ser este caso. 10for (var i = 0; i < dnis.length; i++) { 11var name = markers[i].getAttribute("name"); document.getElementById("name").value=name; //asignamos el value al 12string nombre sacado del XML 13 } 14 }); 15 } 16 function downloadUrl(params,url, callback) { 17 var request = window.ActiveXObject ? 18 new ActiveXObject('Microsoft.XMLHTTP') : 19 new XMLHttpRequest; //en cierto modo es una API, acepta requests 20HTTP. 21 22request.onreadystatechange = function() { if (request.readyState == 4) { 23 request.onreadystatechange = doNothing; 24 callback(request.responseText, request.status); 25 } 26 }; request.open("POST", url, true); 27 request.setRequestHeader("Content-Type", "application/x-www-form28urlencoded");//creacin de headers 29 request.setRequestHeader("Content-Length", params.length); 30 request.send(params);//enviamos la peticin POST } 31 32 function parseXml(str) { 33 if (window.ActiveXObject) { 34 var doc = new ActiveXObject('Microsoft.XMLDOM'); 35 doc.loadXML(str); 36 return doc; } else if (window.DOMParser) { 37 return (new DOMParser).parseFromString(str, 'text/xml'); 38 } 39 } 40 41
Con esto hemos creado la funcin leerDni(string) -que slo llama a downloadURL(string,url,callback), pero es ms cmodo- y la funcin de parseo a XML y la que enva la peticin al servidor. Si somos un poco observadores, nos damos cuenta de que la funcin downloadURL tiene como parmetro una URL genxml.php que no es ms que un archivo PHP que debe estar en el mismo directorio que el archivo JS que estamos ejecutando segn est estructurado. Ahora vamos con la parte del servidor, la que ejecuta la conexin a la base de datos y devuelve el XML correspondiente a nuestra peticin. 1 <?php header("Content-type: text/xml"); 2 $username="MIUSUARIO"; 3 $password="MICONTRASEA"; 4 $database="MIBBDD"; 5 6 function parseToXML($htmlStr) { 7 $xmlStr=str_replace('<','<',$htmlStr); 8 $xmlStr=str_replace('>','>',$xmlStr); 9 $xmlStr=str_replace('"','"',$xmlStr); 10$xmlStr=str_replace("'",''',$xmlStr); 11$xmlStr=str_replace("&",'&',$xmlStr); return $xmlStr; 12} 13 14$connection=mysql_connect (localhost, $username, $password); 15if (!$connection) { 16 die('Not connected : ' . mysql_error()); } 17 18$db_selected = mysql_select_db($database, $connection); 19if (!$db_selected) { 20 die ('Can\'t use db : ' . mysql_error()); 21} 22 23//$dni= filter_input(INPUT_POST, 'dni',FILTER_STRING); evitar inyecciones SQL en produccin 24$dni= $_POST["dni"]; 25$query = "SELECT * FROM Personas WHERE DNI= '{$dni}'"; //las llaves 26son importantes!!!!!!!!! 27$result = mysql_query($query); if (!$result) { 28 die('Invalid query: ' . mysql_error()); 29} 30 31echo '<personas>'; 32 33// Iterate through the rows, printing XML nodes for each while ($row = @mysql_fetch_assoc($result)){ //por si queremos 34 expandirlo a ms personas 35 // ADD TO XML DOCUMENT NODE 36 echo '<persona'; 37 echo 'name="' . parseToXML($row['Nombre']) . '" '; 38 echo 'dni="' . parseToXML($row['DNI']) . '" '; echo '/>'; 39} 40echo '</personas>';
41?> 42 43 44 45 46 47 Con esto ya tendramos funcionando todo, espero que os haya servido, un saludo!

Daniel Rozo

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Daniel Rozo

Hochgeladen von

Copyright:

Verfügbare Formate

Daniel Rozo

Das könnte Ihnen auch gefallen