Consulta base de datos con AJAX y PHP
Tengo un problema no logro realizar una consulta a base de datos mediante un formulario utilizando AJAX, la página no me muestra nada... Encontré un ejemplo en la red pero utiliza una lista desplegable en donde realiza una consulta a la base de datos para después consultar los datos completos.. Lo que yo quiero es utilizar un campo de texto y así realizar la consulta, espero haberme explicado..!
Aquí los códigos que utilizo..
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Consulta de datos</title>
<script language="JavaScript" type="text/javascript" src="ajax.js"></script>
</head>
<body>
<p>Este ejemplo muestra como realizar una consulta de los registros de una tabla usando un control de lista.</p>
<form name="formulario" action="" onsubmit="pedirDatos()" >
<!-- <select name="lista" onchange="pedirDatos(); return false">
<option value="Froebel">Froebel</option>
<option value="Laura Morales">Laura Morales</option>
</select>-->
Nombre:(input type="text" name="lista" />
<input type="submit" value="Enviar"/>
</form>
<div id="resultado" style="border:1px solid #FF0000; color:#000099;width:400px;">
</div>
</body>
</html>
ajax.js
function objetoAjax(){
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (E) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function pedirDatos(){
//donde se mostrar el resultado
divResultado = document.getElementById('resultado');
//tomamos el valor de la lista desplegable
nom=document.formulario.lista.value;
//instanciamos el objetoAjax
ajax=objetoAjax();
//usamos el medoto POST
//archivo que realizar la operacion
//datoscliente.php
ajax.open("POST", "datoscliente.php",true);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
//mostrar resultados en esta capa
divResultado.innerHTML = ajax.responseText
}
}
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//enviando los valores
ajax.send("lista="+nom)
}
*datoscliente.php
<?php
require('conexion.php');
//capturar el nombre del cliente
$nom=$_POST['lista'];
//seleccionamos los datos del cliente por su nombre
$sql=mysql_query("SELECT * FROM empleados WHERE nombres='".$nom."'",$con);
$row = mysql_fetch_array($sql);
//mostrando el resultado
echo "
<p><strong>Nombre</strong></p>
<p>".$row['nombres']."</p>
";
echo "
<p><strong>Departamento</strong></p>
<p>".$row['departamento']."</p>
";
echo "
<p><strong>Sueldo</strong></p>
<p>".$row['sueldo']."</p>
";
?>
datoscliente.php
<?php
require('conexion.php');
//capturar el nombre del cliente
$nom=$_POST['lista'];
//seleccionamos los datos del cliente por su nombre
$sql=mysql_query("SELECT * FROM empleados WHERE nombres='".$nom."'",$con);
$row = mysql_fetch_array($sql);
//mostrando el resultado
echo "
<p><strong>Nombre</strong></p>
<p>".$row['nombres']."</p>
";
echo "
<p><strong>Departamento</strong></p>
<p>".$row['departamento']."</p>
";
echo "
<p><strong>Sueldo</strong></p>
<p>".$row['sueldo']."</p>
";
?>
En el archivo de conexión solo realizo la conexión a la base de datos..!
Espero puedas ayudarme... Saludos..!
Aquí los códigos que utilizo..
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Consulta de datos</title>
<script language="JavaScript" type="text/javascript" src="ajax.js"></script>
</head>
<body>
<p>Este ejemplo muestra como realizar una consulta de los registros de una tabla usando un control de lista.</p>
<form name="formulario" action="" onsubmit="pedirDatos()" >
<!-- <select name="lista" onchange="pedirDatos(); return false">
<option value="Froebel">Froebel</option>
<option value="Laura Morales">Laura Morales</option>
</select>-->
Nombre:(input type="text" name="lista" />
<input type="submit" value="Enviar"/>
</form>
<div id="resultado" style="border:1px solid #FF0000; color:#000099;width:400px;">
</div>
</body>
</html>
ajax.js
function objetoAjax(){
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (E) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function pedirDatos(){
//donde se mostrar el resultado
divResultado = document.getElementById('resultado');
//tomamos el valor de la lista desplegable
nom=document.formulario.lista.value;
//instanciamos el objetoAjax
ajax=objetoAjax();
//usamos el medoto POST
//archivo que realizar la operacion
//datoscliente.php
ajax.open("POST", "datoscliente.php",true);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
//mostrar resultados en esta capa
divResultado.innerHTML = ajax.responseText
}
}
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//enviando los valores
ajax.send("lista="+nom)
}
*datoscliente.php
<?php
require('conexion.php');
//capturar el nombre del cliente
$nom=$_POST['lista'];
//seleccionamos los datos del cliente por su nombre
$sql=mysql_query("SELECT * FROM empleados WHERE nombres='".$nom."'",$con);
$row = mysql_fetch_array($sql);
//mostrando el resultado
echo "
<p><strong>Nombre</strong></p>
<p>".$row['nombres']."</p>
";
echo "
<p><strong>Departamento</strong></p>
<p>".$row['departamento']."</p>
";
echo "
<p><strong>Sueldo</strong></p>
<p>".$row['sueldo']."</p>
";
?>
datoscliente.php
<?php
require('conexion.php');
//capturar el nombre del cliente
$nom=$_POST['lista'];
//seleccionamos los datos del cliente por su nombre
$sql=mysql_query("SELECT * FROM empleados WHERE nombres='".$nom."'",$con);
$row = mysql_fetch_array($sql);
//mostrando el resultado
echo "
<p><strong>Nombre</strong></p>
<p>".$row['nombres']."</p>
";
echo "
<p><strong>Departamento</strong></p>
<p>".$row['departamento']."</p>
";
echo "
<p><strong>Sueldo</strong></p>
<p>".$row['sueldo']."</p>
";
?>
En el archivo de conexión solo realizo la conexión a la base de datos..!
Espero puedas ayudarme... Saludos..!
{"lat":18.8048571787378,"lng":-98.930447101593}
1 Respuesta
Respuesta de krowmx
1
Toda la lógica esta muy bien, debe ser un error de sintaxis, el primero que veo es en datoscliente.php en:
$sql=mysql_query("SELECT * FROM empleados WHERE nombres='".$nom."'",$con);
$row = mysql_fetch_array($sql);
agrega:
$sql=mysql_query("SELECT * FROM empleados WHERE nombres='".$nom."'",$con);
$row = mysql_fetch_array($sql);
echo $sql;
ya que normalmente es sin puntos y comillas sencillas,
$sql=mysql_query("SELECT * FROM empleados WHERE nombres='$nom'",$con);
Prueba así Saludos
$sql=mysql_query("SELECT * FROM empleados WHERE nombres='".$nom."'",$con);
$row = mysql_fetch_array($sql);
agrega:
$sql=mysql_query("SELECT * FROM empleados WHERE nombres='".$nom."'",$con);
$row = mysql_fetch_array($sql);
echo $sql;
ya que normalmente es sin puntos y comillas sencillas,
$sql=mysql_query("SELECT * FROM empleados WHERE nombres='$nom'",$con);
Prueba así Saludos
Gracias por la respuesta amigo.. lo he probado como me dices y no funciona...! =(
He notado que al enviar los datos me los mando por url como si estuviera utilizando el método GET.. y no es así, utilizo POST, lo que no logro entender es porque al hacerlo con un <select> la consulta funciona de maravilla.. espero puedas ayudarme..!
Gracias..!
He notado que al enviar los datos me los mando por url como si estuviera utilizando el método GET.. y no es así, utilizo POST, lo que no logro entender es porque al hacerlo con un <select> la consulta funciona de maravilla.. espero puedas ayudarme..!
Gracias..!
Efectivamente cuando logras ver los datos tipo GET, es por que hay algún error de sintaxis y no esta siendo bien ejecutado tu código,
a la hora de agregar
echo $sql;
¿Cómo te lo describí en el anterior post, que te apareció?
a la hora de agregar
echo $sql;
¿Cómo te lo describí en el anterior post, que te apareció?
