Foros del Web - Ver Mensaje Individual

art_rockerd · #9 (**permalink**) 11/12/2012, 13:41

Pues que crees, despues de buscar y buscar encontre la solucion, y la comparto por si a alguien le llegase a servir, son tres archivos listos para copy paste para que los prueben, incluyo el script de la base de datos con los inserts :)

Script de base de datos para las pruebas.

Código MySQL:

Ver originalcreate database ajax_demo
 
CREATE table user (
id int not null auto_increment,
firstname varchar(40),
lastname varchar(40),
age int,
hometown varchar(40),
job varchar(40),
PRIMARY KEY(id)
);
 
insert into user (firstname,lastname,age,hometown,job) VALUES   ("Peter","Griffin",41,"Quahog","Brewery"),
                                                                ("Lois","Griffin",40,"Newport","Piano Teacher"),
                                                                ("Joseph","Swanson",39,"Quahog","Police Officer"),
                                                                ("Glenn","Quagmire",41,"Quahog","Pilot")

Codigo del HTML

Código HTML:

Ver original<html>
<head>
<script type="text/javascript" language="javascript" src="findUser.js"></script>
</head>
<body>
 
<form>
<select id="financiamiento" onchange="colocaIVA()">
                <option value="0">Escoge...</option>                
                <option value="1">1 Pago</option>
                <option value="12">12 meses</option>
                <option value="24">24 meses</option>
                <option value="36">36 meses</option>
            </select></br>
<select name="users" id="user" onchange="showUser()">
<option value="0">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Joseph Swanson</option>
<option value="4">Glenn Quagmire</option>
</select>
</form>
<br>
<div id="txtHint"><b>Aqui se mostrara el nombre</b></div>
<div id="txtHint2"><b>Aqui se mostrara el apellido</b></div>
<div id="txtHint3"><b>Aqui se mostrara el r</b></div>
 
</body>
</html>

"findUser.js" Codigo del JS con la COMPATIBILIDAD PARA EL IE6

Código Javascript:

Ver original//se ejecuta con un onchage del select:option del html, 
//puede ser cualquier otro evento de JS: onclick, onblur, etc.....
function showUser()
{
var selObj2 = document.getElementById('financiamiento');
var str2 = selObj2.selectedIndex;
var selObj3 = document.getElementById('user');
var str3 = selObj3.selectedIndex;
//si escogio la primera opcion, le dice que no se encontro datos
//e imprime vacio el div txtHint2
if (str3=="0")
  {
  document.getElementById("txtHint").innerHTML="No se encontro datos";
  document.getElementById("txtHint2").innerHTML="";
  return;
  } 
  //Aqui esta el ajax para los distintos navegadores.
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  //Con esta funcion recibimos variables de PHP para pintarlas en pantalla
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    //aqui es donde estamos recibiendo con el responseText, y 
    //con el metodo split separamos el echo que recibimos de PHP
    var separar=xmlhttp.responseText.split(",");
        var nombre = separar[0];
        var apellido = separar[1];
        var r = separar[2];
        //aqui estamos pintando en los divs los valores que deseemos
    document.getElementById("txtHint").innerHTML=nombre;
    document.getElementById("txtHint2").innerHTML=apellido;
    document.getElementById("txtHint3").innerHTML=r;
    }
  }
  //Aqui es en donde estamos enviando las variables al arhivo PHP y 
  //la variable seleccioada del HTML selected:option
xmlhttp.open("GET","getuser.php?q="+str3+"&r="+str2,true);
 
xmlhttp.send();
 
// :) y eso es todo!!! esta ya esta modificada para parseo de variables
//y para tenerlo todo en archivos separados, .html, .js, .php
 
}

getuser.php CODIGO PHP que hace la conexion y consuta a BDD

Código PHP:

Ver original<?php
//leemos la variable que nos envia Javascript
$q=$_GET["q"];
$r=$_GET["r"];
//conecatmos ala bdd
$con = mysql_connect('localhost', 'root', '');
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }
mysql_select_db("ajax_demo", $con);
//realizamos consulta a BDD
$sql="SELECT * FROM user WHERE id = '$q'";
$result = mysql_query($sql);
//Obtenemos los datos de la consulta y enviamos a JS
while($row = mysql_fetch_array($result))
  {
  $fistname= $row['firstname'] . "</td>";
  $lastname= $row['lastname'] . "</td>";
  $age= $row['age'] . "</td>";
  $hometown= $row['hometown'] . "</td>";
  $job= $row['job'] . "</td>";
  //con este echo se envia las variables separadas por "," o cualquier otro caracter
    echo $fistname.",".$lastname.",".$r;
  }
//termianos conexion a bdd
mysql_close($con);
?>

Muchas gracias por la ayuda, espero que esto le sirva a alguien mas, ya es cuestion de modificarlo y adaptarlo a sus aplicaciones, listo para copy paste :P