Invia richiesta AJAX facendo clic su un collegamento senza reindirizzare l'utente

Question

Ho un'applicazione Web che presenta una serie di elementi diversi, generati da una tabella MySQL. Mentre gli utenti lo sfogliano, voglio che siano in grado di fare clic su un collegamento accanto all'elemento che inserirà la richiesta in un database MySQL. Normalmente, lo farei creando una pagina PHP (che farò comunque) che afferra l'ID utente & dall'URI usando il metodo $ _GET & inserendolo nella tabella. Tuttavia, in questo caso, non voglio che gli utenti vengano reindirizzati lontano da dove si trovano. Voglio solo che il link invii la richiesta e magari visualizzare un piccolo messaggio dopo che ha avuto successo.

Ho pensato che jQuery/AJAX sarebbe la cosa migliore per questo, ma dato che non ne ho molta familiarità, non sono sicuro di cosa fare. Qualche consiglio è apprezzato!

Answer 1

Devi fare qualcosa di simile

$('.classofyourlink').click(function(e){ 
    e.preventDefault();//in this way you have no redirect 
    $.post(...);//Make the ajax call 
}); 

in questo modo l'utente effettua una chiamata AJAX facendo clic su un link senza reindirizzamento. Ecco la documentazione per $.post

EDIT - per passare il valore per jQuery nel tuo caso si dovrebbe fare qualcosa di simile

$('.order_this').click(function(e){ 
    e.preventDefault();//in this way you have no redirect 
    var valueToPass = $(this).text(); 
    var url = "url/to/post/"; 
    $.post(url, { data: valueToPass }, function(data){...});//Make the ajax call 
}); 

Answer 2

Vedi http://api.jquery.com/jQuery.ajax/

$('#my-link').click(function(){ 
    $.ajax({ 
     url: "mypage.php", 
     context: document.body, 
     success: function(){ 
     $(this).addClass("done"); 
     } 
    }); 
    return false; 
}); 

Answer 3

HTML

<a id="aDelete" href="mypage.php">Delete</a> 

Script

$(function(){  
    $("#aDelete").click(function(){   
     $.post("ajaxserverpage.php?data1=your_data_to_pass&data2=second_value",function(data){ 
     //do something with the response which is available in the "data" variable 
    }); 
    }); 
    return false;  
});