Vanilla Javascript - #30 Ajax com PHP

Nesse tutorial trabalharemos com Ajax novamente, porém agora utilizando o PHP como linguagem backend e utilizando o método post.

Servidor PHP

Como vamos trabalhar com PHP, precisamos de um servidor, para tanto instale o Wamp ou o Xamp ou o Lamp.

HTML

No nosso html criaremos o formulário que realizará a requisição:

<form name="form" id="form" method="post" action="controller.php">
    <input type="text" name="name" id="name" placeholder="Write your name"><br>
    <input type="submit" value="Enviar">
</form>

Javascript

No JS iremos chamar o nosso ajax, dessa vez utilizando o método post e fazendo uma requisição ao PHP:

(function readyJS(win,doc){
    'use strict';

    let form=doc.querySelector('#form');

    //Send ajax form
    function sendForm(event){
        event.preventDefault();
        let ajax=new XMLHttpRequest();
        let params='name='+doc.querySelector('#name').value;
        ajax.open('POST','controller.php');
        ajax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
        ajax.onreadystatechange=function(){
            if(ajax.status===200 && ajax.readyState===4){
                let json=JSON.parse(ajax.responseText);
                console.log(json.name+' - '+json.age+' - '+json.city);
            }
        };
        ajax.send(params);
    }
    form.addEventListener('submit',sendForm,false);

})(window,document);

Repare que no código acima criamos a variável params e passamos esses parâmetros lá pro nosso PHP.

No PHP receberemos o POST nome e retornaremos um objeto json:

<?php
$name=filter_input(INPUT_POST,'name',FILTER_SANITIZE_SPECIAL_CHARS);
$arr=[
    'name'=>$name,
    'age'=>18,
    'city'=>'Belo Horizonte'
];
echo json_encode($arr);

Sucesso nos códigos e na vida!