点击图片后更新图片，而无需重新加载页面

Question

我正在制作这个Flag/Unflag系统，它工作正常。我唯一要苦苦挣扎的事情是单击后如何更新Flag_icon？应该是这样，它在单击后才更改，如果再次单击，则它会变回来。现在，我必须单击该标志，然后手动重新加载页面，然后对其进行更改。 $FlagStatus[$count]在我的数据库中的值为YES/NO，而$testjobids[$count]是数据库表中的唯一ID。我一直在寻找一些Ajax和Javascript来做到这一点，但是我似乎无法正确地实现它。我只需要指出正确的方向，因为我有点被卡住了。

Index.php

        if ($FlagStatus[$count] == ('YES')) {
            echo'<img class="Unflagging" onclick="changeImage('.$testjobids[$count].')" id="'.$testjobids[$count].'" data-id = "'.$testjobids[$count].'" src = "../Test/Images/Flag/FlagMarked.png">';
        } elseif($FlagStatus[$count] == ('NO')){
            echo'<img class="Flagging" onclick="changeImage()" id="'.$testjobids[$count].'" data-id2 = "'.$testjobids[$count].'" src = "../Test/Images/Flag/FlagUnmarked.png">';
        }

Flagging.php /与Unflagging.php几乎相同

<?php
require("../resources/MysqliHandler.class.php");
require("../resources/layoutfunctions.php");
require("GetData.php");
$ICON_DIMENSION = "16px";
// Used to connect the right server Testreportingdebug or Testreporting
$db = ServerConn();
// -------------------------------------
$MysqliHandler = new mysqliHandler($db);
$MysqliHandler->query("SET NAMES UTF8");
$receiver = $_POST["FlagID"];
$MarkYes = "UPDATE `testreportingdebug`.`testjob` SET `FlagStatus` = 'YES' WHERE id = $receiver";
$query = $MysqliHandler->query($MarkYes);
?>

Ajax

  echo'
    <script type="text/javascript">
        $(document).on("click", ".Unflagging", function(){          
              var FlagID = $(this).data("id");
                  $.ajax({
                    method: "post",
                    url: "unflagging.php",
                    data: { FlagID: FlagID},
                    success: function(data) {
                      changeImage();
                  }
             });
        });
        $(document).on("click", ".Flagging", function(){           
              var FlagID = $(this).data("id2");
                  $.ajax({
                    method: "post",
                    url: "flagging.php",
                    data: { FlagID: FlagID},
                    success: function(data) {
                      changeImage();
                  }
             });
        });
    </script>
    ';