使用 AJAX 的跟随按钮

Question

我创建了一个按钮，您可以使用 AJAx 和 PHP 来关注/取消关注用户。 如果你点击按钮，你关注，否则，你取消关注。 有一个功能可以检查您尝试关注的用户是否已被关注...

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;
    }
});

问题是，我每次点击按钮时如何加载那些 php 函数...

点击 > 关注

再次点击 > 取消关注

Answer 1

这里有一些建议：

我注意到您正在 PHP 中创建 HTML 字符串。如果可能，您希望避免这样做。

保留您所有的 HTML、CSS 和 JavaScript 客户端。随着您作为开发人员的进步，您将开始了解原因。将它们视为模板。

在这种情况下，您只需将“已关注”或“未关注”返回给客户端回调。可以将其归结为布尔值！

因此，在您的模板中，定义关注状态和未关注状态。使用 CSS 隐藏适当的一个。这可以非常轻巧！

在这些示例中，您只需在按钮上设置关注属性。

所以你的 javascript 看起来像：

// I would do something like:
find=document;
id="getElementById";

/* ... */

success: function (request, status)
{   
    if (!status)
        return
    ;

    find[id]("follow-1").setAttribute("follow", request.responseText)
}

（检查lib的ajax api）

1.)

<button id="follow-1" follow="true">
 <img src="transparent.png" />
</button>

+

button[follow="false"] > img
{ background: transparent url("unfollow.png");
}
button[follow="true"] > img
{ background: transparent url("follow.png");
}

2.)

<button id="follow-1" follow="true">
 <img src="follow.png" />
 <img src="unfollow.png" />
</button>

+

button[follow] > img
{ display: none;
}
button[follow="false"] > img:last-child
{ display: block;
}
button[follow="true"] > img:first-child
{ display: block;
}

Answer 2

我建议使用诸如 CodeIgniter 之类的框架来处理后端，因为您可以直接从 ajax 将数据直接发布到公共控制器方法，但大致了解它是如何工作的（您可能需要修复错误/调整正如我凭记忆写的）：

添加到 PHP 以处理传入请求：

//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");
           }
       });
    });
});