Como enviar una petición AJAX con POST con parametros

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.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="main.js"></script>
    <title>Ejercicio AJAX 2</title>
</head>
<body>
    
    
</body>
</html>

 

Ya teniendo creado nuestro main.js, empezamos creando nuestra función y asociarlo con el onload para que se ejecute al principio.



function enviarPersona() {

}

window.onload = enviarPersona;

Creo el objeto que es el que hará la llamada:


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.


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.


<?php
    // 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.


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:


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í:


let params = "persona=" + JSON.stringify(persona)+"&param2="+ param2+"&param3="+param3;

Ahora vamos a establecer que función realizara nuestra petición al recibir los datos.


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.


llamada.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

Sino la ponemos, nos puede dar problemas. OS recomiendo ponerlo.

Veamos todo el ejemplo completo:


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:


{
    "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.

Etiquetas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *