Question

好的，所以我正在努力建立一个完整的新网站，所以请耐心等待。我想要的是，在按钮单击时，修改我的数据库中的信息。谷歌和Stack Overflow告诉我，我应该使用AJAX。或HTTP PUT。或者其他的东西。问题是，我没有足够的基础知识，没有给我这个勺子。我看了很多例子，但没有一个是有道理的。有人可以用一种对特别密集的大学生和/或一桶涂料有意义的方式解释如何使用AJAX（或者你认为我应该使用的任何东西）吗？我需要具体细节，比如我需要制作另一个文件以及放入什么内容以及在哪里找到对全能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的看法。它不像上面所说的那样流畅，而是一系列步骤。

将上述内容分成三个单独的文件。 HTML，JavaScript，PHP。如果任何一种语言渗透到另一种语言中，你就会过于流畅地思考。

首先是HTML，它只是一个常规形式。没有PHP。其次是你包含一个JavaScript文件，在那里你告诉它中断表单自然要做的提交事件，它会重定向到另一个页面。相反，你的JavaScript告诉表单保持不变，让JavaScript做一个迷你＆＃34;重定向＆＃34;在页面内部的某些PHP，并等待你用它来更新某些HTML的响应。

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

ELI5 AJAX在上下文中？

1 个答案: