Chamadas Ajax com JQuery e PHP

callScript.html

<script src="script.js"></script>

chamarjquery.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

form.html

<h1>Formulário de Registo</h1>
 
<form id="registo" method="post" action="javascript:enviarRegisto();">
 
	<input type="text" id="nome" name="nome" placeholder="Nome"><br>
	<input type="password" id="password" name="password" placeholder="Password"><br>
	<input type="email" id="email" name="email" placeholder="Email"><br>
	<input type="submit" value="Submeter">
 
</form>

processar.php

<?php

/*
 * Receber os dados do formulário através
 * de informações enviadas pelo ajax com 
 * o método POST.
 */
$nome = $_POST['nome'];
$password = $_POST['password'];
$email = $_POST['email'];

/*
 * Criação de uma variável que mais tarde irá
 * guardar o resultado da operação: se foi concluída
 * com sucesso ou não.
 */
$resultado =  array();

/*
 * Ligação à base de dados utilizando PDO. Eu, por exemplo,
 * utilizei SQLite mas  pode ser utilizado qualquer outro tipo
 * de bases de dado.
 */
$db = new PDO('sqlite:db.sqlite');


/*
 * Query/Chamada para inserir os dados que obtemos via POST
 * na base de dados.
 */
$query = $db->prepare("INSERT INTO utilizadores VALUES (:nome, :password, :email)");
$query->bindParam(':name', $nome);
$query->bindParam(':password', $password);
$query->bindParam(':email', $email);

if($query->execute();) {

	/*
	 * Se a chamada for concluída com  sucesso,
	 * será atribuído o valor "true" ao elemento
	 * status da array $resultado.
	 */

	$resultado['status'] = true;

} else {

	//Caso contrário será falso.

	$resultado['status'] = false;
}


/*
 * Informa que o arquivo vai ser do tipo Json.
 * Assim, o Ajax vai conseguir receber a resposta
 * corretamente.
 */

header('Content-type: application/json');

/*
 * Envio da array $resultado novamente para o lado do cliente
 * em  formato json.
 */
echo json_encode($resultado);

?>

script.js

function enviarRegisto() {
    
    /*
     * Obtenção dos dados do formulário e colocação dos mesmos
     * no formato nomeDaInfo=Info para enviar por POST.
     *
     * Utiliza-se a função val() para obter os valores
     * dos inputs com os id's em questão.
     */
    
    
    /*
     * Criação da variável data que vai conter toda a informação
     * a enviar para o servidor.
     */
    data = $("#registo").serialize();
    
    /*
     * Podemos também definir a variável data da seguinte forma:
     *
     * nome = 'nome=' + $('#nome').val();
     * password = 'password=' + $('#password').val();
     * email = 'email=' + $('#email').val();
     *
     * data = nome + '&' + password + '&' + email;
     */
 
    //Começa aqui o pedido ajax
    $.ajax({
        //Tipo do pedido que, neste caso, é POST
        type: 'POST', 
        /*
         * URL do ficheiro que para o qual iremos enviar os dados. 
         * Pode ser um url absoluto ou relativo.
         */
        url: 'processar.php', 
        //Que dados vamos enviar? A variável "data"
        data: data,
        //O tipo da informação da resposta
        dataType: 'json'
    }).done(function(response) {
 
        /* 
         * Quando a chamada Ajax é terminada com sucesso,
         * o javascript confirma o status da operação
         * com a variável que enviámos no formato json.
         */
        if(response.status == true) {
            //Se for positivo, mostra ao utilizador uma janela de sucesso.
            alert('Registo bem Sucedido!');
        } else {
            //Caso contrário dizemos que aconteceu algum erro.
            alert('Uups! Ocorreu algum erro!');
        }
 
    }).fail(function(xhr, desc, err) {
        /*
         * Caso haja algum erro na chamada Ajax,
         * o utilizador é alertado e serão enviados detalhes
         * para a consola javascript que pode ser visualizada 
         * através das ferramentas de desenvolvedor do browser.
         */
        alert('Uups! Ocorreu algum erro!');
        console.log(xhr);
        console.log("Detalhes: " + desc + "nErro:" + err);
    });
}

url

http://example.com?infoNome=info&infoNome2=info2