javascript - 使用 Jquery 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>

J查询代码:

<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").css('color',data.watchlisticoncolor);
    } catch (e) {
        console.log("json encoding failed");
        return false;
    }
});
  return false;
});
</script>

PHP 文件 insertwatchlist.php 文件

$response = new \stdClass();
$response->watchlisticoncolor = "red";
die(json_encode($response));

PHP文件insertwatchlist.php文件的输出

{"watchlisticoncolor":"red"}

预期结果:

1.) 当有人点击 add_box 按钮时，它会提交表单而不重新加载页面(这个工作正常)

2.) insertwatchlist.php 发送此代码:{"watchlisticoncolor":"red"} 并且 Jquery 代码将它们放在: $watchlisticoncolor 变量，实时而无需重新加载页面。 (这个不行)，

控制台选项卡不显示任何内容。这是网络选项卡的屏幕截图，当有人单击按钮 http://prntscr.com/fxwt16 时

Answer 1

请使用background-color 而不是color。 color 属性将在您想要更改字体颜色时使用。

来自

$("button#addtowatchlistbutton").css('color',data.watchlisticoncolor);

到

$("button#addtowatchlistbutton").css('background-color',data.watchlisticoncolor);

还在您的 ajax 函数中添加数据。

$.post(url, data, function(data) {

如果它不起作用，请告诉我。

$(".addtowatchlistform").submit(function(e) {
  e.preventDefault();
  var data = $(this).serialize();
  var url = $(this).attr("action");
  $.ajax({
      url: url,
      type: 'post',
      dataType: 'json',
      beforeSend: function() {
        $('#add_to_wishlist').css('color','red');
      },
      success: function(data) {
      }   
   });
});

$('#add_to_wishlist2').click(function(e){
  e.preventDefault();
  $(this).css('background-color','red');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add_to_wishlist" style="color:yellow;">Change Color</button>


<button id="add_to_wishlist2">Change Background Color</button>