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

This is my HTML code

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

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

PHP file insertwatchlist.php file

PHP文件insertwatchlist.php文件

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

Output of PHP file insertwatchlist.php file

输出PHP文件insertwatchlist.php文件

{"watchlisticoncolor":"red"}

Expected Result:

预期结果：

1.)When someone clicks on add_box button, it submits the form without reloading the page (This one works fine)

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

2.) insertwatchlist.php sends this code: {"watchlisticoncolor":"red"} and, the Jquery code place them in place of: $watchlisticoncolor variable, in the real time without reloading the page. (This one do not work),

2.）insertwatchlist.php发送此代码：{“watchlisticoncolor”：“red”}，并且Jquery代码将它们代替：$ watchlisticoncolor变量，实时无需重新加载页面。（这个不起作用），

Console tab do not show anything. Here is the screenshot of network tab, when someone clicks on the button http://prntscr.com/fxwt16

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

3 个解决方案

#1

Try this you have to catch data return from your ajax request in function 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>

3 个解决方案

#1

更多相关文章

随机推荐