将PHP函数更改为Javascript / AJAX验证

Question

I want to use AJAX/Javascript with PHP to carry out this following function and not have it all done by PHP itself. I have created a function which deletes an item from the MySQL database. It gives a validation to the user if they want to remove it by selecting Yes or No.

However, how would i change this so that it does the same function but the validation appears as a popupbox, and when Yes or OK is pressed it deletes the item from the database and reloads the page to show it has been removed.

I have provided the PHP code which relates to this function, but i want to specifically change this to using AJAX/Javascript as well in accordance with PHP.

<?php 
    // Delete Item Question to Admin, and Delete Product if they choose
    if (isset($_GET['deleteid'])) {
        echo 'Do you really want to delete product with ID of ' . $_GET['deleteid'] . '? <a href="inventory_list.php?yesdelete=' . $_GET['deleteid'] . '">Yes</a> | <a href="inventory_list.php">No</a>';
        exit();
    }
    if (isset($_GET['yesdelete'])) {
        // remove item from system and delete its picture
        // delete from database
        $id_to_delete = $_GET['yesdelete'];
        $sql = mysqli_query($link,"DELETE FROM products WHERE id='$id_to_delete' LIMIT 1") or die (mysql_error());
        // unlink the image from server
        // Remove The Pic -------------------------------------------
        $pictodelete = ("../inventory_images/$id_to_delete.jpg");
        if (file_exists($pictodelete)) {
                    unlink($pictodelete);
        }
        header("location: inventory_list.php"); 
        exit();
    }
    ?>
<?php 
// This block grabs the whole list for viewing
$product_list = "";
$sql = mysqli_query($link,"SELECT * FROM products ORDER BY date_added DESC");
$productCount = mysqli_num_rows($sql); // count the output amount
if ($productCount > 0) {
    while($row = mysqli_fetch_array($sql)){ 
             $id = $row["id"];
             $product_name = $row["product_name"];
             $price = $row["price"];
             $stock = $row["stock"];
             $date_added = strftime("%b %d, %Y", strtotime($row["date_added"]));
             $product_list .= "Product ID: $id - <strong>$product_name</strong> - &pound;$price - Stock: $stock - <em>Added $date_added</em> &nbsp; &nbsp; &nbsp; <a href='inventory_edit.php?pid=$id'>edit</a> &bull; <a href='inventory_list.php?deleteid=$id'>delete</a><br />";

    }
} else {
    $product_list = "You have no products listed in your store yet";
}
?>

Answer 1

Your JS-File

$(document).ready(function() {
  $('.delete').click(function() {
    event.preventDefault();
    var deleteId = $(this).parent().attr('id').val();
    $.get('path/to/you/phpfile', {deleteId: deleteid}, function(data) {
      var confirm = confirm(data);
      if (confirm==true) {
        $.get('path/to/you/phpfile', {yesdelete: 1});
      }
    });
  });
});

In your PHP-File you have to remove header('Location: ...') and the block which grabs the list, wrap it in a function or etract it to another php file to call it with the a simliar ajax-command I used above. And you have to change th $product_list in the while-loop.

Product ID: <div id="$id">$id - <strong>$product_name</strong> - &pound;$price - Stock: $stock - <em>Added $date_added</em> &nbsp; &nbsp; &nbsp; <a href='inventory_edit.php?pid=$id'>edit</a> &bull; <div class="delete">Delete</div></div><br />

jQuery get the id-value of his parent-div. It´s actually not the best way, but something like this should work.