使用Ajax使添加監視列表按鈕功能（PHP）

Question

我的HTML代碼：

<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代碼：

<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代碼

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

預期結果：
1.）當某人cli在add_box按鈕中正，它提交表單，而不重新加載頁面（這一個正常工作）

2）insertwatchlist.php發送此代碼：{"addremove":"item1","watchlisticoncolor":"red"}和jQuery代碼代替它們代替：$addremove和$watchlisticoncolor變量，在實時無需重新加載頁面。

原始結果：

第一項預期結果的點工作正常。預期結果

二點什麼也不做（沒有錯誤）

Answer 1

data不是在$.post()回調函數定義。儘管您已在$.post()呼叫之前定義了data。使用不同的標識符名稱

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

JSON.parse()沒有必要。 jQuery.post()將JSON從服務器轉換爲JavaScript對象