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函数...

点击＆gt;遵循

另一次点击＆gt;取消关注

Answer 1

以下是一些建议：

我注意到你正在用PHP创建HTML字符串。如果可能的话，你想避免这样做。

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

在这种情况下，你只需要返回＆＃34;然后＆＃34;或者＆＃39;取消关注＆＃34;到客户端回调。可以把它煮成一个布尔值！

因此，在您的模板中，定义跟随状态和取消跟随状态。使用CSS隐藏适当的一个。这可能非常轻巧！

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

所以你的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直接将数据发布到公共控制器方法，但是对于它如何工作的粗略想法（你可能需要修复bug / tweak）正如我从记忆中写的那样）：

添加到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");
           }
       });
    });
});

使用AJAX跟随按钮

2 个答案: