我的HTML代碼:使用Ajax使添加監視列表按鈕功能(PHP)
<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
變量,在實時無需重新加載頁面。
原始結果:
第一項預期結果的點工作正常。預期結果
二點什麼也不做(沒有錯誤)
故障排除。 F12,沒有在JavaScript控制檯?網絡標籤怎麼樣,你看到了網絡請求嗎?死亡似乎沒有必要。 'console.log(data);'在你嘗試之前。你得到了什麼? – mkaatman
我建議不要使用'die()'返回一些東西,每[this](http://php.net/manual/en/function.die.php)。我沒有自己測試過,但我的第一本能是嘗試'return'而不是'die()' – Kyrre
沒有結果在F12控制檯選項卡中,這裏是網絡選項卡的屏幕截圖http://prntscr.com/fxntbs – Toby