使用AJAX跟随按钮

Question

I have created a button with which you can follow/unfollow a user, with AJAx and PHP. If you click on the button, you follow, else, you unfollow. There's a function that checks if the user you try to follow is already followed...

HTML

<div class="heart"><i class="fa fa-heart awesome"></i></div>

PHP

    public static function Follow($user, $seguidor){
        $sql = "INSERT INTO seguidores (id_canal, id_seguidor) VALUES ('$user', '$seguidor')";
        $resultado = self::Conexion($sql);
        return $resultado;
    }

    public static function CheckFollow($user, $seguidor){
        $heart = "";
        $sql = "SELECT * FROM seguidores WHERE id_canal = '$user' AND id_seguidor= '$seguidor'";
        $resultado = self::Conexion($sql);
        $verificacion = false;

        if(isset($resultado)) {
            $fila = $resultado->fetch();
            if($fila !== false){
                $verificacion = true;
            }
        }

        if($verificacion == false){
            $heart = "<div data-id='".$user."' class='heart'><i class='fa fa-heart awesome'></i></div>";
        } else {
            $heart = "<div data-id='".$user."' class='heart like'><i class='fa fa-heart awesome'></i></div>";
        }
        return $heart;
    }

    public static function Unfollow($user, $seguidor){
        $sql = "DELETE FROM seguidores WHERE id_canal = '$user' AND id_seguidor= '$seguidor'";
        $resultado = self::Conexion($sql);
        return $resultado;
    }

AJAX

$(document).ready(function () {

    $function() {
        var element = $(this);
        var data_id = element.attr("data-id");

        $.ajax({
            type: "POST",
            url: "database.php",
            data: data_id,
            success: function(){ }
        });
        return false;
    }
});

The problem is, how can I load those php funcionts everytime I click the button...

Click > follow

Another click > unfollow

Answer 1

I would suggest using framework such as CodeIgniter to handle the back-end as you can post data directly to public controller methods directly from ajax, but for rough idea on how it could work (you may need to fix up bugs / tweak as I wrote from memory):

Add to PHP to handle incoming requests:

//Minimal vulnerability protection while getting inputs.
$update_types = array("Follow", "CheckFollow", "Unfollow");
$update_method = in_array($_POST["update_type"], 
                        $update_types)? $_POST["update_type"], "");

if ($update_method) {
    //Call the update function & bounce the response
    //in JSON back to the AJAX handler.
    echo json_encode(call_user_func($update_method, 
         (int) $_POST["user_id"], (int) $_POST["seguidor"]));
}

Javascript:

  $(document).ready(function () {

    //Button click handler.
    $("div.heart").on("click", function() {
       var my_button = $(this);
       var update_type = "";

       if (my_button.hasClass('.like'))
           update_type = "Unfollow";
       else
           update_type = "Follow";

       $.ajax({
           type: "POST",
           url: "database.php",
           data: {
                  "update_type": update_type,
                  user_id: my_button.attr("data-id"),
                  seguidor: "some value here - not sure based on code"
           },
           success: function(response) {   
             //response from server - check for errors...
             //Update the UI - add heart if follow updated, remove it if not.
             //You will need to modify your php functions to return result code and then either add "like" class or remove it - obviously this is not a complete rewrite of your app.
             if ("/* result is followed */")
               my_button.addClass("like");
             else
                my_button.removeClass("like");
           }
       });
    });
});