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.

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

Navegue nesta série!

Comentários

comments powered by Disqus