Vou mostrar neste artigo como realizar chamada de uma função PHP via Ajax utilizando método GET através de um evento de clique de botão de uma maneira simples. Neste pequeno tutorial iniciante vou exemplificar uma página HTML contendo o JQuery que executará a chamada via Ajax, a função PHP que fará qualquer coisa retornando primeiramente o HTML a ser impresso e depois retornando um Array em JSON.

 

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
<html>
	<head>
		<!-- Incluindo a biblioteca JQuery na página-->
		<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
		<title>Este é um teste Ajax</title>
 
		<!--Chamada Ajax para execução de nossa função php-->
		<script>
			$(document).ready(function() {
				//Declaração da minha função que retornará o HTML
				$("#btnGeraHtml").click(function () { 
					var variavel = $("#numParagrafos").val(); //pegou o valor digitado no input texto
					$.ajax({
						type: "GET", //método escolhido
						url: "funcao.php", //arquivo php chamado
						data: "funcao=html&valor="+variavel,
						dataType: "html",//tipo de função a ser retornada
						error: function(){
							$("#retorno").html("Erro ao carregar HTML! Tente de novo!");
						},
						success: function(html){
							$("#retorno").html(html);
						}
					});
				});
 
				//Declaração da minha função que retornará o JSON
				$("#btnGeraJson").click(function () {
					var variavel = $("#numParagrafos").val(); //pegou o valor digitado no input texto
					var conteudo = "";
					$.ajax({
						type: "GET",
						url: "funcao.php",
						data: "funcao=json&valor="+variavel,
						dataType: "json",
						error: function(){
							$("#retorno").html("Erro ao carregar JSON! Tente de novo!");
						},
						success: function(dados){	 
							 for(j=0;j<dados.length;j++) {
								  conteudo = conteudo + dados[j];
 
							 }
							 $('#retorno').html(conteudo);
 
						}
					});
				});
			});
		</script>
	</head>
 
	<body>
		<h1 style="float: left; width: 100%; text-align: center; font-size: 30px; color:#555">Gerador de Parágrafos.</h1>
		<input type="text" id="numParagrafos" placeholder="Digite o número de parágrafos a serem gerados" style="width: 500px; padding:10px; font-size: 15px; border: 1px solid #999; float: left; margin: 10px 20px;" />
		<input type="button" value="Gerar utilizando Ajax com retorno HTML" id="btnGeraHtml" style="float: left; margin: 10px 20px; padding: 10px 20px; color: #fff; background: #333;cursor:pointer" />
		<input type="button" value="Gerar utilizando Ajax com retorno JSON" id="btnGeraJson" style="float: left; margin: 10px 20px; padding: 10px 20px; color: #fff; background: #333;cursor:pointer" />
		<div id="retorno" style="position:relative; width: 980px; margin: 20px auto;    overflow: hidden;"></div>
	</body>
</html>

Lembrando que o foco aqui não é CSS nem padrões de desenvolvimento e sim apenas mostrar o funcionamento do Ajax com dois tipos de retorno diferentes.

Basicamente a estrutura acima possui um script que chama duas funções diferentes ao clicar em dois botões identificados pelo seus ID’s escritos na página HTML. A partir daí escrevi a mesma função de duas formas diferentes utilizando o retorno diferente mas que fazem a mesma coisa. O primeiro botão simplesmente retorna o HTML montado e simplesmente imprime na página enquanto que o segundo retorna o JSON estruturado para tratar e daí então imprimir.

Explicando sucintamente o código, na primeira linha de cada função ele pega o valor do input digitado no texto e a partir daí seta os parâmetros para a requisição Ajax, no qual se colocam os parâmetros de método (GET/POST), a url a ser chamada (No nosso caso o arquivo PHP funcao.php), as variáveis que utilizarei na minha função pelos métodos GET e/ou POST, o tipo de retorno (HTML / JSON) e o retorno em caso de erro ou sucesso.

No retorno do tipo HTML simplesmente insiro o que criei na minha função PHP na div de ID retorno enquanto que no retorno do tipo JSON eu faço um contador que percorre meu JSON e grava cada índice na variável conteúdo e depois imprime tudo.

Agora o nosso arquivo PHP fica assim:
 

PHP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?php 
	if($_GET['funcao']=='html') {
		funcaoAjaxHtml($_GET['valor']);	
	} elseif($_GET['funcao']=='json') {
		funcaoAjaxJson($_GET['valor']);	
	}
 
	//função pega o número de parágrafos desejados e adiciona à página por html.
	function funcaoAjaxHtml($numero) {
		$html = "";
		for($i=1;$i<=$numero;$i++) {
			$html .="<p id='paragrafo_".$i."' class='texto'>Este é o parágrafo ".$i." gerado via Ajax para testar o retorno <b>HTML</b>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel nibh sapien. Nullam blandit arcu sit amet lectus molestie posuere. Nulla varius augue a sem egestas, congue lobortis augue euismod. </p>";
		}
 
		echo $html; // com o echo, o valor da variável é o retorno da minha função ajax do tipo HTML.
	}
 
	//função pega o número de parágrafos desejados e adiciona à página por json.
	function funcaoAjaxJson($numero) {
		$paragrafos = array();
		for($i=1;$i<=$numero;$i++) {
			array_push($paragrafos,"<p id='paragrafo_".$i."' class='texto'>Este é o parágrafo ".$i." gerado via Ajax para testar o retorno com <b>JSON</b>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel nibh sapien. Nullam blandit arcu sit amet lectus molestie posuere. Nulla varius augue a sem egestas, congue lobortis augue euismod. </p>");
		}
 
		echo json_encode($paragrafos); // utilizo o echo para retornar meu array, porém em formato json.
	}
?>

O arquivo PHP possui basicamente uma verificação para identificar qual função chamar de acordo com os parâmetros que enviei no meu ajax. As duas funções criadas em PHP fazem a mesma coisa, geram o número de parágrafos conforme digitado pelo usuário na tela. A diferença é que um incrementa numa variável $html que será impressa (retorno HTML) e a outra insere num vetor cada parágrafo gerado e depois transforma em JSON e imprime. Vale lembrar que o ‘echo’ utilizado no código é o retorno da requisição Ajax realizada.

Bom, basicamente é isso. Qual a melhor utilizar? Depende do que precisa, o que eu sugiro é utilizar o JSON quando retornar uma lista de usuários para imprimir numa tabela por exemplo, enquanto que o retorno HTML pode ser utilizado para devolver um cálculo ou algo assim. Espero que ajude. Qualquer coisa estou à disposição!

Até a próxima!