如何使用 jQuery Ajax POST 提交表單而不刷新頁面？

使用 PHP 的 jQuery Ajax POST 範例

此範例示範如何使用 jQuery 的 Ajax 功能將表單資料傳送至 PHP 腳本。

問題

使用傳統方法提交表單時，瀏覽器會重新導向到指定的操作 URL。但是，我們希望捕獲表單資料並將其提交給 PHP 腳本，而不會導致頁面刷新。

jQuery 和 Ajax 解決方案

jQuery 的 .ajax 方法允許我們向伺服器發出非同步請求。以下是我們如何使用它來發送表單數據：

HTML:

<form>

jQuery:

$("#foo").submit(function(event) {
    event.preventDefault();

    var $form = $(this);
    var serializedData = $form.serialize();

    $.ajax({
        url: "/form.php",
        type: "post",
        data: serializedData,
        done: function (response, textStatus, jqXHR) {
            console.log("Hooray, it worked!");
        },
        fail: function (jqXHR, textStatus, errorThrown) {
            console.error("The following error occurred: " + textStatus, errorThrown);
        },
        always: function () {
            // Reenable form inputs
        }
    });
});

PHP (form.php):

// Access form data via $_POST
$bar = isset($_POST['bar']) ? $_POST['bar'] : null;

此解決方案使用 .done() 和 .fail() 回呼處理程序分別處理成功和失敗場景。無論請求的結果如何，都會呼叫 .always() 回呼。

附加說明：

• 可以使用 jQuery 簡寫 .post 取代.ajax.
• 記得清理表單資料伺服器端。
• 此程式碼與 jQuery 版本 1.8 及更高版本相容。

以上是如何使用 jQuery Ajax POST 提交表單而不刷新頁面？的詳細內容。更多資訊請關注PHP中文網其他相關文章！