AlpineJS 提交表单而不刷新页面

Answer 1

尝试以下步骤：

1. 向表单添加 @submit.prevent 指令以阻止默认的表单提交行为。

`

<form method="post" id="product_addtocart_form" @submit.prevent="submitForm">
<input name="product" x-model="product" />
<input name="selected_configurable_option" x-model="selectedConfigurableOption" />
<input name="related_product" x-model="relatedProduct" />
<input name="item" x-model="item" />
<button type="submit" form="product_addtocart_form">
  Submit
</button>
</form>

`

并且

`<div x-show="showModal" @click.away="showModal = false" style="display: none;">
        <div class="modal-content">
            Product successfully added to the cart!
            <button @click="showModal = false">Close</button>
        </div>
    </div> `

2. 使用Fetch API进行AJAX请求，向服务器发出AJAX请求将产品添加到购物车，处理服务器响应并显示 如果产品添加成功，则为模态。

`function addToCart() {
        return {
            product: '',
            selectedConfigurableOption: '',
            relatedProduct: '',
            item: '',
            showModal: false,
            async submitForm() {
                const formData = new FormData();
                formData.append('product', this.product);
                formData.append('selected_configurable_option', this.selectedConfigurableOption);
                formData.append('related_product', this.relatedProduct);
                formData.append('item', this.item);

                try {
                    const response = await fetch('/path/to/your/add-to-cart/api', {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'Accept': 'application/json',
                        },
                    });

                    if (response.ok) {
                        const data = await response.json();
                        // Assuming the response contains a success flag or status
                        if (data.success) {
                            this.showModal = true;
                        } else {
                            // Handle error (e.g., show error message)
                            console.error('Error adding product to cart:', data.message);
                        }
                    } else {
                        console.error('Network response was not ok.');
                    }
                } catch (error) {
                    console.error('Error:', error);
                }
            }
        };
    }`

您可以使用

<div x-data="addToCart()">

包裹整个模态框并使用

<form>

以便该功能正常工作。