[Mootools] Request.JSON (AJAX)

[fiote]

Olá a todos!

Esse é um exemplo simples de como fazer uma requisição Request.JSON (AJAX) usando o framework Mootools.

Para fazer esse exemplo funcionar (em partes), você precisa logicamente incluir o mootools no seu html (o core é suficiente).

Para fazer esse exemplo funcionar totalmente, você precisa de uma tabela chamada AlgumaTabela que possua um campo autoIncrement, e dois campos (parte1 e parte2) para que o insert funcione.

Javascript

myReq = null;

document.addEvent('domready',function() {
    
    myReq = new Request.JSON({'url':'outraPagina.php'});
    
    myReq.addEvent('request',function() {
        $('myDiv').set('html','Evento triggado: REQUEST');
    });
    
    myReq.addEvent('timeout',function() {
        $('myDiv').set('html','Evento triggado: TIMEOUT');
        var denovo = confirm('O servidor demorou demais a responder.\n\nDeseja tentar novamente?');
        if (denovo) enviaRequest();
    });
    
    myReq.addEvent('failure',function(erro) {
        $('myDiv').set('html','Evento triggado: FAILURE');
        alert('A requisição falhou!\n\n'+erro.statusText);
        var denovo = confirm('Deseja tentar novamente?');
        if (denovo) enviaRequest();
    });
    
    myReq.addEvent('success',function(retorno,plainText) {
        if (retorno.sucesso == 1) {
            alert('Tudo certo!\n\nO registro inserido é o de ID '+retorno.id);
        } else {
            alert('Ops, ocorreu um erro!\n\n'+retorno.erro);
        }
    });

    $('myInput').set('value','Clique Aqui!').set('disabled',false);
    
});

function enviaRequest() {
    var p1 = $('parte1').value;
    var p2 = $('parte2').value;
    myReq.post({'p1':p1,'p2':p2});
}

minhaPagina.html

<select id='parte1'>
    <option value='1'>1 um</option>
    <option value='2'>2 dois</option>
    <option value='3'>3 três</option>
</select>


<select id='parte2'>
    <option value='4'>4 quatro</option>
    <option value='5'>5 cinco</option>
    <option value='6'>6 seis</option>
</select>

<input id='myInput' value='...' disabled />

<div id='myDiv'>
    Esperando click...
</div>

outraPagina.php

<?php
    $p1 = $_POST['p1'];
    $p2 = $_POST['p2'];
    
    $retorno = array();    
    
/*
    inclua aqui a parte da conexão ao banco de dados
*/

    $query = mysql_query("INSERT INTO AlgumaTabela (Parte1, Parte2) SELECT $p1, $p2");
    $retorno['sucesso'] = ($query) ? 1 : 0;
    $retorno['erro'] = mysql_error();
    $retorno['id'] = mysql_insert_id($query);
    
    echo json_encode($retorno);
?>