Receber GET's para envio dados atraves Ajax/Jquery

[tiko_165 0]

Eu sou um programador de PHP, onde estou neste momento a desenvolver uns botões para envio de dados para a base de dados, alterando o principal codigo, para Javascript.

 

A minha ideia, é retirar a tag html <a href, e evitar o refresh da pagina, fazendo tudo apenas com o jquery.

Fazendo a verificação à base de dados, conseguindo ter na mesma o insert e o delete para a BD atraves do javascript.

 

 

No PHP, eu teria algo deste genero:

Onde o href fazer o insert ou delete, e depois alterava as cores do botão.

$verificar = $db->prepare("SELECT * FROM table_database WHERE user_id='1' AND year='2015' AND preco='2'");
$verificar->execute();

if ($verificar->rowcount() > 0) {
    //Como tem, mostramos o button de remover
    echo "
    <a href='send_delete.php?user_id=1&year=2015&preco=2'>
        <button id='buttonCoin' title='remove_1' type='button' class='btn bgm-red'>Remover</button>
    </a>";
} else {
    //Senão tiver, mostramos button adicionar
    echo "
    <a href='send_add.php?user_id=1&year=2015&preco=2'>
        <button id='buttonCoin' title='add_1' type='button' class='btn bgm-green'>Adicionar</button>
    </a>";
}

Mas como recentemente ando a alterar para o Ajax, coloquei algo deste genero:

$(document).ready(function() {
    $("#buttonCoin").click(function() {
        if($("#buttonCoin").hasClass("bgm-green")) {
            $.ajax({
                type: "GET",
                url: "send_add.php",
                data: "user_id=1&year=2015&preco=2",
                beforeSend: function(){
                    $("#buttonCoin").html('<i class="fa fa-spinner fa-spin"></i> Loading');
                },
                success: function(data){
                    $("#buttonCoin").removeClass("bgm-green");
                    $("#buttonCoin").addClass("bgm-red");
                    $("#buttonCoin").text("Eliminar");
                },
                error: function(xhr, textStatus, error){}
            }); 
        } else {
            $.ajax({
                type: "GET",
                url: "send_delete.php",
                data: "user_id=1&year=2015&preco=2",
                beforeSend: function(){
                    $("#buttonCoin").html('<i class="fa fa-spinner fa-spin"></i> Loading');
                },
                success: function(data){
                    $("#buttonCoin").removeClass("bgm-red");
                    $("#buttonCoin").addClass("bgm-green");
                    $("#buttonCoin").text("Adicionar");
                },
                error: function(xhr, textStatus, error){}
            }); 
        }
    });
});

Mas a minha duvida é a seguinte.

 

Eu no PHP crio varios botões com o While, então como faço para este codigo associar a cada botão, conseguindo receber todas as variaveis do GET?

 

Eu da forma como coloquei o "data:" no ajax, o codigo funciona, mas eu pretendo receber as variaveis de cada botão, dando para todos eles.

[William Bruno 1501]

Utilize classes:

 

    $(".buttonCoin").on('click', function(event) {
        event.preventDefault();
        var $this = $(this);
        if($this.hasClass("bgm-green")) {
            $.ajax({
                type: "GET",
                url: "send_add.php",
                data: $this.attr('href').replace('send_add.php?', ''),
                beforeSend: function(){
                    $this.html('<i class="fa fa-spinner fa-spin"></i> Loading');
                },
                success: function(data){
                    $this.removeClass("bgm-green");
                    $this.addClass("bgm-red");
                    $this.text("Eliminar");
                },
                error: function(xhr, textStatus, error){}
            }); 
        } else {
            $.ajax({
                type: "GET",
                url: "send_delete.php",
                data: $this.attr('href').replace('send_delete.php?', ''),
                beforeSend: function(){
                    $this.html('<i class="fa fa-spinner fa-spin"></i> Loading');
                },
                success: function(data){
                    $this.removeClass("bgm-red");
                    $this.addClass("bgm-green");
                    $this.text("Adicionar");
                },
                error: function(xhr, textStatus, error){}
            }); 
        }
    });
});

E lá no html você adiciona a classe:

 

<a href='send_add.php?user_id=1&year=2015&preco=2' class='buttonCoin'>

[tiko_165 0]

Dessa forma que mostrou, a página faz refresh, e eu não pretendo isso :/

[William Bruno 1501]

Então sobrou algum erro de sintaxe no teu js.

Aperte Ctrl + Shift + J e veja no console o que você errou.