使用 Ajax 制作添加关注列表按钮功能 (PHP)答案

【问题标题】：Using Ajax to make add watchlist button feature (PHP)使用 Ajax 制作添加关注列表按钮功能 (PHP)
【发布时间】：2017-12-24 22:08:08
【问题描述】：

我的 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.)当有人点击add_box按钮时，它提交表单而不重新加载页面（这个工作正常）

2.) insertwatchlist.php 发送此代码：{"addremove":"item1","watchlisticoncolor":"red"} 并且，Jquery 代码将它们替换为：$addremove 和 $watchlisticoncolor 变量，实时无需重新加载页面。

原始结果：

预期结果的第一点工作正常。

预期结果的第二点什么都不做（没有错误）

【问题讨论】：

疑难解答。 F12，javascript 控制台中什么都没有？网络选项卡怎么样，您看到正在发出的网络请求吗？模具似乎没有必要。 console.log(data); 在您尝试之前。你得到了什么？
根据this，我建议不要使用die() 来返回某些东西。我自己没有测试过，但我的第一直觉是尝试return而不是die()
F12控制台标签没有结果，这里是网络标签prntscr.com/fxntbs的截图
单击该请求，然后转到响应选项卡。它有你期望的 JSON 吗？ console.log 结果呢？
response 制表符？？控制台选项卡为空

标签： javascript php jquery html ajax

【解决方案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 对象

【讨论】：

仍然，“没有任何反应”。 F12 控制台选项卡没有结果，这里是网络选项卡的屏幕截图prntscr.com/fxntbs
以他为例，在函数内部立即添加console.log(response);。
@Toby 链接的截图显示回复是200
@Toby 注意data 是在 JavaScript 的 Question 中定义的，虽然不是来自 $.post() 的响应，因为在 $.post() 回调函数中没有参数。 id 中的 document 应该是唯一的；有重复的addtowatchlistbuttonids HTML 在问题
先生，我无法为每个按钮添加不同的 ID。任何 Jquery 解决方案？谢谢