Skip to content

Instantly share code, notes, and snippets.

@jorgebraz
Created March 13, 2012 22:16
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save jorgebraz/2032132 to your computer and use it in GitHub Desktop.
Save jorgebraz/2032132 to your computer and use it in GitHub Desktop.
Pedido ajax usando jQuery
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script>
// var query = A palavra de pesquisa, não sei onde a estás a ir buscar...
$.ajax(
{
url: 'http://oteusite.qqcoisa.pt/response.php',
type: 'get', // -> $_GET no PHP
data: {
query: query // -> $_GET['query'] no PHP;
},
success: function( data ) {
var result;
// Antes de mais, para debug, vamos fazer um console.log
console.log( data );
// Esta variável data é a resposta que o servidor dá
// logo, tendo em conta o formato que definimos no servidor,
// será algo deste género
// {
// success: boleanos,
// code: numer,
// result: objecto,
// message: string
// }
// antes de mais ver se há erros graves!
// no script de php podemos ver que a resposta que damos no succes é true ou false,
// logo se o tipo não for boleano é porque aconteceu algo de errado!
if ( typeof data.success !== 'boolean' ) {
console.error( 'E cum raio! O servidor nem respondeu JSON como deve ser' );
return false;
}
// se o sucesso é falso é porque não chegou lá nenhum query
if ( !data.success ) {
// lembras-te que mandámos uma message do lado do php...
console.error( data.message );
return false;
}
// já lidámos com os erros, por isso agora é só fazer magia! :)
result = data.result;
// se não houver resultados para a pesquisa feita, vamos também para a execução
if ( !data.result.length ) {
console.warn( data.message );
return false;
}
// Agora sim, temos a certeza que temos dados com deve ser, por isso vamos (vais, vão)
// fazer alguma coisa com eles
// eu vou só fazer um console.dir
console.dir( data );
return true;
},
error: function() {
console.error( 'Calhou erro!' );
return false;
}
}
);
<script>
<?php
// Como sabemos que queremos responder com JSON, podemos declarar
// o content-type logo à cabeça do script!
// É preciso ter em atenção que sempre que houver um erro ou warning de
// php a resposta não vai ser JSON válido e, por isso, o jquery vai ter
// problemas em lidar com a variável data.
header('Content-type: application/json');
// Primeiro ver se existe alguma coisa no parâmetro query!
if ( empty( $_GET['query'] ) ) {
// se está vazio podemos responder com um objecto vazio
//$response = array();
// ou podemos ser um pouco mais ambiciosos e criar um
// standard para as nossas respostas
$response = array(
// no callback de success do jQuery a primeira coisa que vamos
// verificar é este success!
'success' => false,
// o erro foi do cliente (que não mandou uma query válida para servidor),
// logo, só porque sim, vou mandar um código de erro 400
// http://en.wikipedia.org/wiki/List_of_HTTP_status_codes.
// Este campo não é vinculativo de nada, mas pode dar informação útil
// que nos permite fácilmente dar feedback diferente ao utilizar, dependendo se o
// erro foi do lado do cliente, ou do lado do servidor
'error' => 400,
'message' => 'Tens que pesquisar por alguma coisa né!?',
);
// poderiamos ainda responder a dizer que houve um erro
// $response = array( 'error' => 'Tens que pesquisar por alguma coisa né!?' );
// vamos "cuspir" a resposta;
echo json_encode( $response );
// e "morrer" === parar execução do script
die();
}
// Eu gosto de escrever código desta forma: faço as verificações
// necessária à cabeça do script e faço die() se se verificar
// a condição.
// em vez do die() dentro deste if, podia-se fazer um padrão como o seguinte:
// if ( not OK ) {
// do not ok stuff
// } else {
// do ok stuff
// }
// responde();
// die();
// Agora que sabemos que há um parametro 'query' passado por GET ao servidor
// guarda-se numa variável.
$query = $_GET['query'];
// Neste bloco farás o teu query e o que quiseres.
// O importante é que no fim tenhas um array com os dados que queres
// mandar de volta para o javascript
// $result = array com os resultados do query
$result = array(
'macaco',
'gorila',
'orangotando',
'chimpanzé',
'saguim',
'babuino'
);
// podemos por exemplo contar o total de resultados e pôr numa variável
$total = count( $result );
if ( $total === 0 ) {
$message = 'Não encontrei resultados :(';
} else {
// Um operador ternário só para complicar um bocadinho :P
$message = "Encontrei {$total} ";
$message .= ( $total === 1 ) // if ( total === 1 )
? 'resultado' // then singular
: 'resultados'; // else plural
// Amigos, em php aspas ( " " ) e plicas( ' ' ) não são a mesma coisa.
// Podem parecer porque no fim fazem um resultado sememlhante mas têm
// uma grande diferença:
// O conteúdo entre aspas é interpretado, por isso é que a variável $total
// é correctamente impressa na string: Encontrei 20 resultados
// O conteúdo entre plicas é interpretado literalmente: Encontrei {$total} resultados.
// Desta forma, é forma é boa prática usar plicas, excepto quando sabemos que
// vamos escrever na string uma variável que deve ser interpretada e não escrita
// literalmente
}
$response = array(
'success' => true,
'error' => 200,
'result' => $result,
'message' => $message,
);
// Em vez desta resposta complexa podia-se responder apenas com
// $response = $result;
echo json_encode( $response );
die();
?>
@Trovoada
Copy link

Sounds good!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment