Javascript 环境中的Eli5Ajax？

好吧，所以我想作为一个完全的新手建立一个网站，所以请容忍我。 我想要的是，点击一个按钮，修改我数据库中的信息。Google和Stack Overflow告诉我应该使用AJAX。或HTTP PUT。或者别的什么。问题是，我的基础知识太少，不能不把这汤匙给我。我看过很多例子，但没有一个是有意义的。有人能解释一下如何使用AJAX（或者你认为我应该使用的任何东西）对一个特别密集的大学生和/或一桶含铅油漆有意义吗？我需要一些细节，比如我是否需要制作另一个文件，放入什么，在哪里找到神奇的神秘URL，这些显然对万能的AJAX很重要。这是我现在正在使用的代码，它在一个.php文件中。它可能并不漂亮，但它成功地获取了我所需要的所有信息，并且有可爱的小按钮，也许有一天会有所作为

  <div id="Sell" class="tabcontent">
  <h3>Sell</h3>
        <?php

            $inventory = mysqli_query($con, "SELECT * FROM inventory WHERE email = '$user'");
            $s=4;
            while ($row = mysqli_fetch_array($inventory)) {
                $result = $row["itemid"];
                $items = mysqli_query($con, "SELECT * FROM items WHERE itemid = '$result'");
                while ($row1 = mysqli_fetch_array($items)) {
                    $sp = $row1["sellprice"];
                    $image = $row1["image"];
                    $imageData = base64_encode(file_get_contents($image));
                    echo '<img src="data:image/png;base64,'.$imageData.'" height="42" width="42">';
                    echo $row1["itemname"];
                    echo " x";
                    echo $row["quantity"]."<br>";
                    echo "$sp Kitcoins"."<br>";
                    echo "<!-- Trigger/Open The Modal -->
                    <button id='myBtn$s'>Sell</button>

                    <!-- The Modal -->
                    <div id='myModal$s' class='modal'>

                      <!-- Modal content -->
                     <div class='modal-content'>
                       <p>Are you sure you want to sell?</p>
                       <button id='confirm$s'>Confirm</button>
                       <button id='cancel$s'>Cancel</button>                    
                     </div>

                    </div>

                    <script>
                    // Get the modal
                    var modal$s = document.getElementById('myModal$s');

                    // Get the button that opens the modal
                    var btn$s = document.getElementById('myBtn$s');
                    var btncon$s = document.getElementById('confirm$s');
                    var btncan$s = document.getElementById('cancel$s');

                    // When the user clicks the button, open the modal 
                    btn$s.onclick = function() {
                        modal$s.style.display = 'block';
                    }

                    btncan$s.onclick = function() {
                        modal$s.style.display = 'none';
                    }
                    btncon$s.onclick = function() {
                        // ???
                        window.location.reload();
                    }

                    </script>"."<br>";
                    $s += 1;

                }

            }?>

</div>

卖
你所遭受的是缺乏分离，这是因为你对AJAX的心态。这不是一个像上面所说的那样流动的东西，而是一系列的步骤

将上述内容分为三个单独的文件。HTML，JavaScript，PHP。如果任何一种语言渗透到另一种语言中，你的思维就太流畅了

首先是HTML，它只是一种常规形式。没有PHP。第二个是包含一个JavaScript文件，并在其中告诉它中断表单自然希望执行的提交事件，该事件被重定向到另一个页面。相反，您的JavaScript告诉表单保持不变，让JavaScript在页面内执行一个小“重定向”到某个PHP，然后等待响应，您将使用该响应更新HTML的某些部分

看起来最不一样的是你的PHP。它没有显示任何内容。它只处理数据。它从JavaScript接收数据并用数据响应。很可能您的输入和输出都应该是JSON格式。您的JavaScript侦听并使用响应更新HTML