Hola a todos, hoy os voy a explicar como podemos recuperar datos con un GET en AJAX.
La mejor forma de conectar PHP con Javascript, es usando AJAX, en nuestro caso, vamos a mandar desde Javascript un objeto y con PHP nos va a crear un fichero JSON con ese objeto.
Recordar que Javascript no puede crear ficheros, pero PHP si.
Para quien no lo sepa, AJAX es Asynchronous JavaScript And XML, esto significa que no ejecuta al momento, sino que hace una petición y este espera a que reciba la respuesta, continuando el flujo del programa.
Mi recomendación es hacer este ejemplo en un servidor local o un servidor real, ya que tenemos código PHP que ejecutar.
Tendremos un HTML básico, sin nada mas que un Javascript asociado:
Lo primero que haremos es crear la estructura de HTML.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
lang="en"> charset="UTF-8"> name="viewport" content="width=device-width, initial-scale=1.0"> http-equiv="X-UA-Compatible" content="ie=edge"> |
Ya teniendo creado nuestro main.js, empezamos creando nuestra función y asociarlo con el onload para que se ejecute al principio.
|
1 2 3 4 5 |
function enviarPersona() { } window.onload = enviarPersona; |
Creo el objeto que es el que hará la llamada:
|
1 2 3 4 5 6 7 8 |
function enviarPersona() { // creo el objeto que realizara la llamada let llamada = new XMLHttpRequest(); } window.onload = enviarPersona; |
Indicamos la ruta del fichero PHP al que llamare, en mi caso esta en el mismo sitio que el fichero JS.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function enviarPersona() { // creo el objeto que realizara la llamada let llamada = new XMLHttpRequest(); // url del php a llamar let url = "guardarPersona.php"; } window.onload = enviarPersona; |
Os voy a pasar el contenido del fichero PHP.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// Decodifico el parametro persona que me envian $data = json_decode($_POST['persona']); // Fichero donde voy a crear las personas $fichero = "personas.json"; // Abro el fichero en modo lectura $fd = fopen($fichero,"w"); // Escribo el objeto codificado fputs($fd,json_encode($data)); // cierro el fichero fclose($fd); // Vuelvo a mandar a la persona en la respuesta echo json_encode($data); ?> |
Creo el objeto que yo le voy a querer pasar al PHP.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function enviarPersona() { // creo el objeto que realizara la llamada let llamada = new XMLHttpRequest(); // url del php a llamar let url = "guardarPersona.php"; // Creo la persona que voy a insertar let persona = { "nombre": "Pepe", "apellido": "Alcazar", "profesion": "Comerciante" }; } window.onload = enviarPersona; |
Como queremos pasar el objeto al fichero PHP, debemos poner parámetros. Así lo hacemos:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
function enviarPersona() { // creo el objeto que realizara la llamada let llamada = new XMLHttpRequest(); // url del php a llamar let url = "guardarPersona.php"; // Creo la persona que voy a insertar let persona = { "nombre": "Pepe", "apellido": "Alcazar", "profesion": "Comerciante" }; // Indico los parametros que voy a mandar let params = "persona=" + JSON.stringify(persona); } window.onload = enviarPersona; |
Si queréis mandar mas de uno, tendrás que hacerlo así:
|
1 |
let params = "persona=" + JSON.stringify(persona)+"¶m2="+ param2+"¶m3="+param3; |
Ahora vamos a establecer que función realizara nuestra petición al recibir los datos.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
function enviarPersona() { // creo el objeto que realizara la llamada let llamada = new XMLHttpRequest(); // url del php a llamar let url = "guardarPersona.php"; // Creo la persona que voy a insertar let persona = { "nombre": "Pepe", "apellido": "Alcazar", "profesion": "Comerciante" }; // Indico los parametros que voy a mandar let params = "persona=" + JSON.stringify(persona); // Funcion que se ejecutara al recibir la respuesta llamada.onreadystatechange = function () { // si todo esta bien if (this.readyState === 4 && this.status === 200) { let personaRecibida = JSON.parse(this.responseText); console.log("Se ha insertado correctamente: " , personaRecibida); } } } window.onload = enviarPersona; |
La condición del if sirve para comprobar que la petición ha llegado correctamente.
Y dentro del if lo que hacemos es parsear el objeto que con llega en responseText.
Por ultimo, debemos lanzar la petición, con los métodos open y send del XMLHttpRequest.
En open, indica el tipo de llamada (POST), la url a la que llamo (la del fichero PHP) y si es asíncrono o no (si, es decir, true).
Al hacer send, enviamos la petición donde le hemos indicado y al recibir los datos llamara a la función que le hemos indicado, tenemos que pasarle los parámetros.
También deberemos añadir esta linea, antes de enviar la petición.
|
1 |
llamada.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); |
Sino la ponemos, nos puede dar problemas. OS recomiendo ponerlo.
Veamos todo el ejemplo completo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
function enviarPersona() { // creo el objeto que realizara la llamada let llamada = new XMLHttpRequest(); // url del php a llamar let url = "guardarPersona.php"; // Creo la persona que voy a insertar let persona = { "nombre": "Pepe", "apellido": "Alcazar", "profesion": "Comerciante" }; // Indico los parametros que voy a mandar let params = "persona=" + JSON.stringify(persona); // Funcion que se ejecutara al recibir la respuesta llamada.onreadystatechange = function () { // si todo esta bien if (this.readyState === 4 && this.status === 200) { let personaRecibida = JSON.parse(this.responseText); console.log("Se ha insertado correctamente: " , personaRecibida); } } // Indico que es una peticion POST llamada.open("POST", url, true); // Esta linea es necesaria en una peticion POST llamada.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); llamada.send(params); // Le paso los parametros } window.onload = enviarPersona; |
Con esto estaría todo, vamos a probarlo en el navegador (abrir la consola del navegador):
Y se creara este fichero:
|
1 2 3 4 5 |
{ "nombre": "Pepe", "apellido": "Alcazar", "profesion": "Comerciante" } |
Os dejo un vídeo donde lo explico todo con mas detalle:
Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.
Deja una respuesta