在上下文中使用ELI5 AJAX？

Question

Okay, so I'm trying to build a website as a complete newb, so bear with me. What I want is to, on a button click, modify information in my database. Google and Stack Overflow tell me that I should probably be using AJAX. Or HTTP PUT. Or something. The problem is, I have too little base knowledge to not have this spoonfed to me. I've looked through many examples and none of them make sense. Can someone explain how to AJAX (or whatever you think I should be using) in a way that makes sense to a particularly dense college student and/or bucket of lead paint? I'm gonna need specifics, like if I need to make another file and what to put in it and where to find the magical mystery urls that are apparently important to almighty AJAX. Here is the code I'm working with right now, it's in a .php file. It's probably not pretty, but it successfully pulls all the information I need and has cute little buttons that maybe will one day do something.

  <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

What you suffer from is a lack of separation, and it's because of your mindset about AJAX. It is not one fluid thing like what you have above, but a series of steps.

Separate the above into three separate files. HTML, JavaScript, PHP. If any language bleeds into another you're thinking too fluidly.

First is the HTML which is just a regular form. No PHP. Second is you include a JavaScript file, and in there you tell it to interrupt the submit event that the form naturally wants to do, which is redirect to another page. Instead your JavaScript tells the form to stay put, and let the JavaScript do a mini "redirect" inside the page to some PHP, and wait for a response that you'll update some piece of the HTML with.

What will look most different is your PHP. It doesn't display anything. It only deals in data. It receives the data from your JavaScript and responds with data. Most likely both your input and output should be JSON format. Your JavaScript listens for and updates your HTML with the response.