Si ya tienes la estructura HTML y la consulta SQL en el lado del servidor, solo necesitas realizar una petición asíncrona (AJAX):
1. Generas una instancia para la petición:
Código Javascript
:
Ver originalvar ajax = new XMLHttpRequest();
2. Abres la petición indicando el método HTTP y la dirección con la cadena de consulta respectiva.
Código Javascript
:
Ver originalajax.open("GET", "ejemplo.php?id=" + document.querySelector("#id").value);
3. Estableces una función que se ejecutará en cuanto se obtenga una respuesta a la petición:
Código Javascript
:
Ver originalajax.addEventListener("load", function(){
if (this.status == 200){
alert(this.textResponse); //Aquí se mostrará la respuesta a la petición
}
}, false);
4. Envías la petición:
Cosas a tomar en cuenta:
1. El atributo
id
de los elementos HTML debe contener un valor ÚNICO en todo el documento. Si lo estás repitiendo, entonces, siempre se tomará el valor del primer elemento que posea dicho
id
. Lo mejor es usar el atributo
class
o usar una
id
distinta.
2. El archivo PHP debe ser distinto al que estás usando para lanzar la petición. Y, en dicho archivo, debes ejecutar el código directamente, sin usar una función de por medio.