如何避免在php post表单提交中重新加载页面

Question

-在菜单页面中，我有一个表单，其中包括菜单项的表单，并添加到收藏夹按钮（愿望清单），当我将其添加到收藏夹时，它会很好地添加到数据库中，但它会重新加载我尝试过的页面AJAX 请求并更新按钮文本而不重新加载页面，但它不起作用，需要一些帮助。谢谢

menu.php 和脚本

<div class="wrapper wrapp-menu-item">
                <div class="menu-item flex-row zoom-gallery">
                    <?php
                    $select_products = $conn->prepare("SELECT * FROM `products`");
                    $select_products->execute();
                    if($select_products->rowCount() > 0) {
                        while($fetch_product = $select_products->fetch(PDO::FETCH_ASSOC)) {
                            ?>
                            <div class="single-menu-item" data-category="pizzas">
// menu form  
                                <form action="" method="post" onsubmit="onFormSubmit();">
                                    <input type="hidden" name="pid" value="<?= $fetch_product['id']; ?>">
                                    <input type="hidden" name="name" value="<?= $fetch_product['name']; ?>">
                                    <input type="hidden" name="last_name" value="<?= $fetch_product['last_name']; ?>">
                                    <input type="hidden" name="description" value="<?= $fetch_product['description']; ?>">
                                    <input type="hidden" name="details" value="<?= $fetch_product['details']; ?>">
                                    <input type="hidden" name="component" value="<?= $fetch_product['component']; ?>">
                                    <input type="hidden" name="price" value="<?= $fetch_product['price']; ?>">
                                    <input type="hidden" name="image" value="<?= $fetch_product['image_01']; ?>">
                                    <img src="uploaded_img/<?= $fetch_product['image_01']; ?>" alt="">
                                    <div class="single-menu-item-content">
                                        <h3>
                                            <?= $fetch_product['name']; ?>
                                        </h3>
                                        <h5>
                                            <?= $fetch_product['last_name']; ?>
                                        </h5>
                                        <p>
                                            <?= $fetch_product['description']; ?>
                                        </p>
                                        <p><b>
                                                <?= $fetch_product['details']; ?>
                                            </b>
                                        </p>
                                        <p>
                                            <?= $fetch_product['component']; ?>
                                        </p>
                                        <div class="b-f">
                                            <p class="price">
                                                <?= $fetch_product['price']; ?>le
                                            </p>
// submit button 
                                            <button class="fav-btn" type="submit" name="add_to_wishlist">
                                                <?php echo $button_text; ?>
                                                <svg class="heart-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                                    fill="#000000">
                                                    <path
                                                        d="M12 21.35l-1.45-1.32C5.4 14.25 2 11.45 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C15.09 3.81 16.76 3 18.5 3 21.58 3 24 5.42 24 8.5c0 2.95-3.4 5.75-8.55 11.54L12 21.35z" />
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <?php
                        }
                    } else {
                        echo '<p class="empty">no products found!</p>';
                    }
                    ?>
                </div>
            </div>


  <script>
    $(document).ready(function() {
        $(".fav-btn").click(function(event) {
            event.preventDefault();

            var productId = $(this).closest('.single-menu-item').find('input[name="pid"]').val();
            var name = $(this).closest('.single-menu-item').find('input[name="name"]').val();
            var lastname = $(this).closest('.single-menu-item').find('input[name="last_name"]').val();
            var description = $(this).closest('.single-menu-item').find('input[name="description"]')
                .val();
            var details = $(this).closest('.single-menu-item').find('input[name="details"]').val();
            var component = $(this).closest('.single-menu-item').find('input[name="component"]').val();
            var price = $(this).closest('.single-menu-item').find('input[name="price"]').val();
            var image = $(this).closest('.single-menu-item').find('input[name="image"]').val();

            $.ajax({
                url: 'components/wishlist_cart.php',
                type: 'post',
                data: {
                    add_to_wishlist: true,
                    pid: productId,
                    name: name,
                    last_name: lastname,
                    description: description,
                    details: details,
                    component: component,
                    price: price,
                    image: image
                },
                success: function(data) {
                    // Handle the response, update the button text or show a message
                    alert(data.message);

                    // Optional: Update the button text
                    if (data.message.includes('added')) {
                        $(this).text('Added to Favorites');
                    }
                },
                error: function(error) {
                    console.error('Error:', error);
                }
            });
        });
    });
    </script>

这是处理提交的 Wishlist_cart.php

<?php
session_start();
include 'components/connect.php';

// Check if the form is submitted
if(isset($_POST['add_to_wishlist'])) {
    $pid = $_POST['pid'];
    $name = $_POST['name'];
    $last_name = $_POST['last_name'];
    $description = $_POST['description'];
    $details = $_POST['details'];
    $component = $_POST['component'];
    $price = $_POST['price'];
    $image = $_POST['image'];

    // Use session ID as a unique identifier
    $user_identifier = session_id();

    // Check if the item is already in the wishlist
    $check_wishlist_numbers = $conn->prepare("SELECT * FROM `wishlist` WHERE pid = ? AND user_identifier = ?");
    $check_wishlist_numbers->execute([$pid, $user_identifier]);

    if($check_wishlist_numbers->rowCount() > 0) {
        $message[] = 'Item is already in the wishlist!';
        $button_text = 'Added to Favorites';
    } else {
        // Insert the wishlist item into the database
        $insert_wishlist = $conn->prepare("INSERT INTO `wishlist` (user_identifier, pid, name, last_name, description, details, component, price, image) VALUES (?,?,?,?,?,?,?,?,?)");
        $insert_wishlist->execute([$user_identifier, $pid, $name, $last_name, $description, $details, $component, $price, $image]);
        $message[] = 'Item added to wishlist!';
        $button_text = 'Added to Favorites';
    }
} else {
    // Default button text
    $button_text = 'Add to Favorites';
}
?>

Answer 1

您应该将事件侦听器附加到表单 onSubmit，而不是按钮 onClick