Javascript 使用Jquery Ajax（从外部PHP文件接收的颜色）更改按钮的颜色

这是我的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>

PHP文件

insertwatchlist.PHP

文件的输出

{"watchlisticoncolor":"red"}

预期结果：

1.）当有人单击

add_box

按钮时，它提交表单而不重新加载页面（这一个可以正常工作）

2.

insertwatchlist.php

发送以下代码：

{“watchlisticoncolor”：“red”}

，Jquery代码将它们实时放置在：

$watchlisticoncolor

变量的位置，而无需重新加载页面。（这个不行）

---

控制台选项卡不显示任何内容。这是“网络”选项卡的屏幕截图，当有人单击按钮时，请使用

背景色

而不是

颜色

<代码>颜色属性将在您要更改字体颜色时使用

来自

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

至

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

还可以在ajax函数中添加数据

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

如果不起作用，请告诉我

$（“.addtowatchlistform”）.submit（函数（e）{
e、 预防默认值（）；
var data=$（this.serialize（）；
var url=$（this.attr（“操作”）；
$.ajax({
url:url，
键入：“post”，
数据类型：“json”，
beforeSend:function（）{
$（'add#u to_wishlist'）.css（'color'，'red'）；
},
成功：功能（数据）{
}   
});
});
$（“#将_添加到_wishlist2”）。单击（函数（e）{
e、 预防默认值（）；
$（this.css（'background-color'，'red'）；
});

变色
更改背景颜色
已更新：

在进一步检查后，我发现它不是css正确的。这是jquery post函数的问题

函数中缺少数据。在下面使用；如果它能解决您的问题，请告诉我

 $.post(url, data, function(data) {
    try {
        data = JSON.parse(data);
        $("button#addtowatchlistbutton").css('color',data.watchlisticoncolor);
    } catch (e) {
        console.log("json encoding failed");
        return false;
    }


用于文本颜色的颜色属性。
使用背景色而不是颜色

背景色

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

对于文本颜色

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

试试这个，您必须在函数params中捕获从ajax请求返回的数据

<script>
$(".addtowatchlistform").submit(function(e) {
  var data = $(this).serialize();
  var url = $(this).attr("action");
  var form = $(this); // Add this line
  $.post(url, data, function(data) { //<---------add data here
    try {
        data = JSON.parse(data);
        $(form).children("button").css('color',data.watchlisticoncolor); //Update this line
    } catch (e) {
        console.log("json encoding failed");
        return false;
    }
});
  return false;
});
</script>


$（“.addtowatchlistform”）.submit（函数（e）{
var data=$（this.serialize（）；
var url=$（this.attr（“操作”）；
var form=$（this）；//添加此行
$.post（url、数据、函数（数据）{//这是一个字体broSo您想更改背景色或颜色吗？我想更改颜色，因为代码没有从
insertwatchlist.php
file Bro接收数据。请检查我的更新答案，并相应地更改ajax post调用这是一种字体bro@Toby执行控制台日志检查data.watchlisticoncolor是否正确返回。Console选项卡为emptyWorks，但它会更改所有按钮的颜色，而不仅仅是单击的按钮。您知道解决方案吗，先生？您必须对答案投赞成票。否则，我的所有努力都是白费的。希望它能起到帮助作用，但它会更改所有按钮的颜色，而不仅仅是单击的按钮。您知道解决方案吗，先生？如果它有效，您必须选择正确的按钮try
$（“.addtowatchlistform按钮#addtowatchlistbutton”）.css（'color'，data.watchlisticoncolor）；
@azad它将我重定向到
insertwatchlist.php
文件
$("button#addtowatchlistbutton").css('color',data.watchlisticoncolor);

<script>
$(".addtowatchlistform").submit(function(e) {
  var data = $(this).serialize();
  var url = $(this).attr("action");
  var form = $(this); // Add this line
  $.post(url, data, function(data) { //<---------add data here
    try {
        data = JSON.parse(data);
        $(form).children("button").css('color',data.watchlisticoncolor); //Update this line
    } catch (e) {
        console.log("json encoding failed");
        return false;
    }
});
  return false;
});
</script>