Javascript 使用Ajax实时更改2个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>

添加框
//与上述表格相同
添加框

Jquery代码：

<script>
$(".addtowatchlistform").submit(function(e) {
  var data = $(this).serialize();
  var url = $(this).attr("action");
  $.post(url, data, function() {

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

$（“.addtowatchlistform”）.submit（函数（e）{
var data=$（this.serialize（）；
var url=$（this.attr（“操作”）；
$.post（url、数据、函数（）{
});
返回false；
});

它现在做什么

当有人点击

add_box

（提交表单）按钮时，它会在后台运行

insert.php

insert.php

文件在其中设置了两个变量，即：

$addremove

和

$watchlisticoncolor

。我想在我的主文件中也运行这个变量。（您可以在

标记中找到这些变量，我想替换它们），而无需重新加载页面

---

如何使用Jquery或PHPAJAX代码实现这一点

如注释所示，您可以使用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));

---

那么您想用服务器上的值更新页面吗？您的

insertwatchlist.php

必须将您想要的数据返回给客户端（可能是通过回显JSON数据），客户端代码将使用该数据更新页面（在当前空的AJAX回调函数中）。是@David sir。好的，那么您被困在哪里？有许多将AJAX与PHP结合使用的示例。您试图返回给客户端的数据是什么？你是如何返回这些数据的？你是如何在客户机上使用它的？我只是不知道怎么做。我尝试了很多东西，但我仍在学习Jquery。我没有把它们添加到问题中，因为在我看来，这不会给问题添加任何内容，也不会让问题变得更加混乱。你肯定应该从努力开始。专注于你试图构建的特定部分。例如，从服务器返回数据。客户端回调函数只能

console.log

暂时记录该数据，以便检查是否返回了该数据。您试图从服务器返回的数据是什么？您试图如何返回数据？你的尝试当然与这个问题有关，因为我们在这里帮助你解决这个问题。堆栈溢出不寻求替换教程，也不是个人教程服务。主席先生，它不会更新变量的值。我不能告诉你为什么，因为它没有显示错误。你从服务器上得到任何结果了吗？什么是

console.log（数据）在AJAX功能日志的第一行？服务器sirI没有发现bug。它应该是
$.post（url，data，function（data）{
，在添加了`data之后，它工作得很好，thanks@Toby太好了。很抱歉，我没有注意到，我关注的是jQuery选择器和DOM，恭喜你做到了，伙计
$.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;
    }
});