Müssen Funktion hinzufügen

Question

Ich möchte eine einfache Funktionalität zu meinen Seiten hinzufügen, wo ein Benutzer eine Schaltfläche "folgen" sehen und indem Sie darauf klicken, wird ein Datenbank-Datensatz erstellt (Benutzer-ID und Seiten-ID). Ich nehme an, dass die Abfrage im Backend erfolgt. Ich denke, ich muss es in AJAX machen, aber ich habe nicht viel mit AJAX gemacht. Ich dachte auch, dass das Aktualisieren des Schaltflächenstatus von FOLLOW zu FOLLOWING (oder etwas Ähnlichem) ich mit jQuery tun könnte, mit einer Art Toggle, während die Anfrage im Hintergrund bearbeitet wird.

Bin ich damit auf dem richtigen Weg?

Answer 1

Sie sind auf dem richtigen Weg.

Ich habe ein Beispiel erstellt, das eine Schaltfläche wie <input type="image" class="follow"> verwendet. Wenn ich Benutzer darauf klicke sendet es eine Anfrage an den Server (URL). Bei Erfolg aktualisiert es das Schaltflächenbild.

$('input[type=image].follow').click(function() { 
    var button = $(this); 
    var current_img = $(button).attr('src'); 
    var current_alt = $(button).attr('alt'); 

    $(button).attr('src', '/style/icons/ajax-loader.gif'); 
    $(button).attr('alt', 'Requesting data from the server...'); 

    $.ajax({ 
     url: url of script the processes stuff (like db update), 
     type: 'POST', 
     data: {}, 
     dataType: "json", 
     error: function(req, resulttype, exc) 
     { 
     $(button).attr('src', '/style/error.png'); 
     $(button).attr('alt', 'Error while updating!'); 
     window.setTimeout(function() { 
      $(button).attr('src', current_img); 
      $(button).attr('alt', current_alt); 
     }, 3000); 
     }, 
     success: function(data) 
     { 
     $(button).attr('src', '/style/followed.png'); 
     $(button).attr('alt', 'Followed'); 
     } 
    }); 

    return false; 
    }); 

Oben ist nur ein Beispielcode. Ändern Sie es nach Ihrem Willen. Viel Spass damit.

Answer 2

AJAX hat Recht, jQuery macht Ajax einfach.

//Post with jQuery (call test.php): 
$.post('test.php', function(data) { 
    //Do something with result data 
}); 

Answer 3

Es klingt, als ob Sie hier auf dem richtigen Weg sind. Wenn Sie mit einer kleineren Anwendung arbeiten, dann wäre die Verwendung einer AJAX-Anfrage und die Erstellung Ihres Datensatzes am einfachsten mit einem Java-Servlet und dem Einfügen von beispielsweise JDBC-Code in Ihre doGet- oder doPost-Methode zur Durchführung der Datenbankoperationen. Gleichzeitig kann Ihre onSuccess-Methode für Ihre AJAX-Anforderung den jQuery-Code aufrufen, der zum Aktualisieren Ihrer Schaltfläche erforderlich ist. Viel Glück!