javascript - 使用 Ajax 实时更改 2 个 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() {

  });
  return false;
});
</script>

它目前做什么？

当有人点击 add_box 时(提交表单)按钮，它运行 insert.php在后台。

insert.php文件在其中设置了 2 个变量，即:

$addremove和 $watchlisticoncolor .我也想在我的主文件中运行这个变量。 (您可以在 <form> 标签中找到这些变量，我想替换它们)，无需重新加载页面即可实时进行。

如何使用 Jquery 或 PHP ajax 代码来实现？

Answer 1

正如评论所建议的那样，您可以使用 JSON 数据在服务器和客户端之间交换您想要的数据

服务器代码(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));

你的客户端ajax函数可能是这样的

$.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;
    }
});