Created
March 13, 2012 22:16
-
-
Save jorgebraz/2032132 to your computer and use it in GitHub Desktop.
Pedido ajax usando jQuery
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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(); | |
?> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Sounds good!