サイト内お気に入り登録機能を作る。その2

前回は見た目のところだけ作りました。
サイト内お気に入り登録機能を作る。その１ - 新米SE、マーケティングを学ぶの巻

今回は、データベースにお気に入り情報を登録、解除するためにajax通信を利用します。

こちらがソースコードです。

HTML

<p><button data-condition=false class="favoButton" data-favoNum=1>☆</button></p>
<p><button data-condition=false class="favoButton" data-favoNum=2>☆</button></p>

JavaScript

$(".favoButton").click(function() {
  //押されたボタンの特定
  var num = $(this).data("favonum");
  var button = this;
  //お気に入りボタンのdata-conditionで制御
  if($(this).data('condition') == false){

    //お気に入り登録
    $.ajax({
      url: 'addFavo.php',
      type: 'POST',
      dataType: 'json',
      data: {favonum: num},
    })
    .done(function(data, textStatus, jqXHR) {
      //登録成功
      if(data.result == true){
        //お気に入りボタンの色を黄色に
        $(button).css('backgroundColor', '#FF0');
        //お気に入りボタン状態の更新
        $(button).data('condition',true);
      }
    })
    .fail(function(data) {
      console.log("error");
    });
    
  }

  else if($(this).data('condition') == true){

    //お気に入り登録解除
    $.ajax({
      url: 'deleteFavo.php',
      type: 'POST',
      dataType: 'json',
      data: {favonum: num},
    })
    .done(function(data, textStatus, jqXHR) {
      //登録解除成功
      if(data.result == true){
        //背景色を解除
        $(button).css('backgroundColor', '');
        //お気に入りボタン状態の更新
        $(button).data('condition',false);
      }
    })
    .fail(function(data) {
      console.log("error");
    });
  }
});

conditionの値でajaxの通信先を定めています。
DBへお気に入り登録や解除はその通信先で行います。
ajaxでの通信が成功した後、
背景色の変更やconditionの更新をしています。