1. devfuria.com.br
  2. javascript
  3. ajax-php-jquery

Aprenda a utilizar Ajax com PHP e jQuery
Aprenda neste artigo a utilizar Ajax com PHP e jQuery, também veremos os métodos curtos: jQuery.post(), jQuery.get() e jQuery.getJSON()

Aprenda neste artigo a utilizar Ajax com PHP e jQuery. Pressuponho que você tenha um servidor web instalado, como o Apache por exemplo e a linguagem PHP também devidamente instalada e habilitada. Além de ter um conhecimento mínimo das linguagem JavaScript e PHP.

  • jQuery é uma biblioteca JavaScript criado por John Resig.
  • PHP é uma linguagem de programação do lado do servidor criada po Rasmus Lerdof.

Se vc caiu de paraquedas nesta página, não deixe de ver as matérias anteriores relacionados ao final deste artigo.

Nosso objeto é criar um arquivo HTML incluindo a biblioteca Jquery e criar um requisição AJAX simples através do método $.ajax() “apontando” para o arquivo PHP denominado script.php. Obteremos como resposta um texto plano com o valor da variável global $_POST.

Mostrar a estrutura de arquivos facilita o entendimento do que vamos fazer, então nossa estrutura será…

/var/www/
    projeto/
        script.php
        index.html

Utilizaremos o HTML abaixo como modelo.

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <title>Ajax com PHP</title>
        <meta charset="utf-8">
    </head>
    <body>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript">
    //
    // Aqui entram seus códigos em JavaScript
    //
    </script>
    </body>
</html>

O método ajax() aceita um objeto JavaScript como parâmetros contendo a configuração de sua chamada Ajax.

var request = $.ajax({

    //
    // A propriedade `url` é local, arquivo, script, alvo de sua requisição.
    //
    url: "script.php",

    //
    // A propriedade `type` é o verbo HTTP (GET, POST, HEAD, etc...)
    //
    type: "POST",

    //
    // A propriedade `data` são os dados de sua aplicação.
    //
    data: "campo1=dado1&campo2=dado2&campo3=dado3",

    //
    // A propriedade `dataType` refere-se ao tipo de dado que o servidor deve retornar a requisição.
    //
    dataType: "html"
});

//
// O método `done()` recebe uma função de callback
// que será executada caso a requisição tenha sucesso.
//
request.done(function(resposta) {
    console.log(resposta)
});

//
// O método `fail()`recebe uma função de callback
// que será executada caso a requisição falhe.
//
request.fail(function(jqXHR, textStatus) {
    console.log("Request failed: " + textStatus);
});

//
// O método `always()` recebe uma função de callback
// que será executada quando a requisição de sucesso estiver completa.
//
request.always(function() {
    console.log("completou");
});

Podemos encadear os métodos done(), fail() e always() tornando o código mais sucinto, veja:

$.ajax({
    url: "script.php",
    type: "POST",
    data: "campo1=dado1&campo2=dado2&campo3=dado3",
    dataType: "html"

}).done(function(resposta) {
    console.log(resposta);

}).fail(function(jqXHR, textStatus ) {
    console.log("Request failed: " + textStatus);

}).always(function() {
    console.log("completou");
});

A requisição aponta para um arquivo em PHP denominado script.php que contém o seguinte conteúdo.

<?php
var_dump($_POST);

Os dados de resposta, em nosso exemplo, serão:

array (size=3)
  'campo1' => string 'dado1' (length=5)
  'campo2' => string 'dado2' (length=5)
  'campo3' => string 'dado3' (length=5)

Documentação Oficial: jQuery.ajax

Métodos mais curtos

jQuery.post

$.post("script.php", "campo1=dado1&campo2=dado2&campo3=dado3", function( data ) {
    console.log(data);
});

Para testar o código acima, utiliza o script.php abaixo.

<?php
var_dump($_POST);

Documentação Oficial: jQuery.post

jQuery.get

$.get("script.php", "campo1=dado1&campo2=dado2&campo3=dado3", function( data ) {
    console.log(data);
});

Para testar o código acima, utiliza o script.php abaixo.

<?php
var_dump($_GET);

Documentação Oficial: jQuery.post

jQuery.getJSON

$.getJSON("script.php", "campo1=dado1&campo2=dado2&campo3=dado3", function( data ) {
    console.log(data);
});

Para testar o código, acima o script.php deve retornar um string JSON, algo parecido como o exemplo abaixo.

<?php
echo json_encode(array("nome" => "fulano", "idade" => "alguns-anos"));

Documentação Oficial: jQuery.getJSON