Следуйте за кнопкой с 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 funcionts каждый раз, когда я нажимаю кнопку ...

Нажмите> следовать

Другого щелчок> неследовать

Answer 1

Вот несколько предложений:

Я заметил, что вы создаете HTML-строки в PHP. Если это вообще возможно, вы хотите избежать этого.

Храните все ваши 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) 
} 

(проверьте ajax api lib)

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