Realizar consulta MySQL desde JavaScript y php. Es posible?
Estoy actualizando un sistemita basico realizado en php por mi hace un tiempo y estoy intentando dar uso de javascript y ajax para algunas cosas pero estoy iniciando en esta parte. Como tal tengo un formulario html con un textbox de busqueda para ingresar el id del cliente, y al dar clic a un boton "buscar" envia mediante metodo post el valor de la variable id, reinicia la pagina php y al tomar dicha variable, busca la relacion en la base de datos clientes y si existe llena los datos de los textbox nombre, direccion y otros. Todo trabaja bien, el problema ahora es que la apariencia y la pantalla blanca cuando refresca la web para realizar la busqueda me da la impresion de que en apariencia no se ve bien. Hay alguna forma de al dar clic en el boton buscar ejecute una consulta con javascript, tome los valores de la base de datos y me llene los otros textbox (nombre, ¿direccion etc) sin necesidad de refrescar la pagina? Me gustaria mucho poder hacer esto. Adjunto imagen de lo que necesito para q les sirva de mas informacion no se si sea relevante
Espero me puedan ayudar con este tema y si tienen alguna otra mejora se les agradece. Salu2
1 Respuesta
La función de envío de formulario sin recargar la página:
<script>
function datos(valor) {
if (valor == "") {
document.getElementById("tabla").innerHTML = ""; //tabla es el contenedor donde dibujas la tabla
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("tabla").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","getdatos.php?q="+valor,true);
xmlhttp.send();
}
}
</script>
<form>
<input type="text" id="clientID" >
<input type="button" name="submit" onclic="datos(getElementById('clientID').value);">
</form>
En la página getdatos.php primero recuperas el id del cliente que es $_GET['q'];
Sacas los datos de la base de datos y creas la tabla entera.
<table>... Datos...</table>. Y lo tienes.
Buen día amigo experto y gracias. No he podido solucionar después de horas buscando información X_X. Modifique el código anterior y agregue el código que me enviaste pero no entiendo bien a lo que te refieres cuando dices "
En la página getdatos.php primero recuperas el id del cliente que es $_GET['q'];
Sacas los datos de la base de datos y creas la tabla entera.
<table>... Datos...</table>"
¿Me podrías explicar un poco mejor esa parte? ¿El código html de la tabla en la página actual de búsqueda lo debo quitar y colocarlo en la pag getdatos.php? Realmente no entiendo esa parte amigo, gracias nuevamente
Esto es un ejemplo de cómo puede ser tu getdatos.php
$_GET['q'] - busca en la url un parámetro "q" y guarda su valor.
ejemplo www.web.com/url.php?q=13
En nuestro caso la URL no se mostrará en el navegador.
¿
<?php
$q = intval($_GET['q']);
$con = mysqli_connect('localhost','user','pass','my_db');
if (!$con) {
die('Error de conexion');
}
$sql="SELECT * FROM mii_tabla WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
echo "<table>
while($row = mysqli_fetch_array($result)) {
aquí montas la tabla con los datos
}
echo "</table>";
mysqli_close($con);
?>
Puedes quitar la tabla del html. Pero debes mantener un contenedor con id="tabla" según nuestro ejemplo donde el script te creará la tabla con sus datos. Fíjate en el ejemplo:
document.getElementById("tabla").innerHTML = ""; tabla es el id del contenedor. puedes poner cualquier cosa...