上下文中的ELI5 AJAX？

Question

好吧，所以我正在试着建立一个完全新手的网站，所以请容忍我。我想要的是，在一个按钮点击，修改我的数据库中的信息。Google和Stack Overflow告诉我，我可能应该使用AJAX。或者HTTP PUT。或者别的什么。问题是，我的基础知识太少了，不能不把它喂给我。我看过很多例子，但没有一个是有意义的。有没有人能解释一下如何使用AJAX (或者你认为我应该使用的任何东西)，以一种对特别密集的大学生和/或含铅涂料桶有意义的方式？我需要一些细节，比如我是否需要创建另一个文件，在其中放入什么内容，以及在哪里找到神奇的神秘urls，这些urls显然对全能的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>

Answer 1

您遭受的痛苦是缺乏分离，这是因为您对AJAX的心态。这不是一个像上面那样的流畅的东西，而是一系列的步骤。

将上面的代码分成三个单独的文件。JavaScript，PHP。如果一种语言渗入了另一种语言，那就说明你的思维过于流畅了。

首先是HTML，它只是一个常规的表单。没有PHP。其次是包含一个JavaScript文件，并在其中告诉它中断表单自然想要做的提交事件，该事件被重定向到另一个页面。相反，您的JavaScript告诉表单原地不动，并让JavaScript在页面内执行一个小型的“重定向”到一些PHP，然后等待响应，您将使用该响应更新HTML的某些部分。

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