使用Ajax制作添加监视列表按钮功能（PHP）

Question

My HTML Code:

<form class="addtowatchlistform" action="logo/insertwatchlist.php" method="POST">

    <input type="hidden" name="tmdb_id" value="'.$result[$x]["tmdb_id"].'"/>
    <button id="addtowatchlistbutton" type="submit" name="tmdb_id" value="'.$result[$x]["tmdb_id"].'" data-tooltip="'.$addremove.' TO YOUR WATCHLIST" class="material-icons" style="color:'.$watchlisticoncolor.'">add_box</button>

</form>

   // Same form as above
<form class="addtowatchlistform" action="logo/insertwatchlist.php" method="POST">

    <input type="hidden" name="tmdb_id" value="'.$result[$x]["tmdb_id"].'"/>
    <button id="addtowatchlistbutton" type="submit" name="tmdb_id" value="'.$result[$x]["tmdb_id"].'" data-tooltip="'.$addremove.' TO YOUR WATCHLIST" class="material-icons" style="color:'.$watchlisticoncolor.'">add_box</button>

</form>

Jquery code:

<script>
$(".addtowatchlistform").submit(function(e) {
  var data = $(this).serialize();
  var url = $(this).attr("action");
  $.post(url, data, function() {

     try {
        data = JSON.parse(data);
        $("button#addtowatchlistbutton").data('tooltip', data.addremove + " TO YOUR WATCHLIST");
        $("button#addtowatchlistbutton").css('color',data.watchlisticoncolor);
    } catch (e) {
        console.log("json encoding failed");
        return false;
    }

  });
  return false;
});
</script>

insertwatchlist.php code

<?php
$response = new \stdClass();
$response->addremove = "item1";//you can get the data anyway you want(e.g database)
$response->watchlisticoncolor = "red";
die(json_encode($response));
?>

Expected Result:
1.)When someone clicks on add_box button, it submits the form without reloading the page (This one works fine)

2.) insertwatchlist.php sends this code: {"addremove":"item1","watchlisticoncolor":"red"} and, the Jquery code place them in place of: $addremove and $watchlisticoncolor variable, in the real time without reloading the page.

Original Result:

First point of expected result works fine.

Second point of expected result do nothing (no error)

Answer 1

data is not defined at $.post() callback function. Though you have already defined data before $.post() call. Use a different identifier name

$.post(url, data, function(response) { // define `response` here
  $("button#addtowatchlistbutton")
  .data('tooltip', response.addremove + " TO YOUR WATCHLIST")
  .css('color',response.watchlisticoncolor);
})

JSON.parse() is not necessary. jQuery.post() converts JSON from server to a JavaScript object