JavaScript监听表单提交：实现无刷新且正常提交的解决方案

要解决「阻止页面刷新同时提交表单并触发PHP订阅逻辑」的问题，核心是用AJAX异步提交表单数据，既保留页面不刷新的交互，又能让PHP处理MailChimp订阅请求。以下是具体修改方案：

1. 修改JavaScript代码（添加AJAX提交逻辑） #

替换原有JS代码，通过AJAX将表单数据异步发送给PHP，同时保留原有的成功提示和Cookie设置：

var form = document.getElementById("formId");
var opTag = document.getElementById("opTag");

function submitForm(event) {
    event.preventDefault();
    
    // 收集表单所有数据
    var formData = new FormData(form);
    
    // 异步提交表单到当前页面的PHP逻辑
    $.ajax({
        url: window.location.href,
        type: 'POST',
        data: formData,
        processData: false, // 不要处理FormData数据
        contentType: false, // 让浏览器自动设置正确的Content-Type
        success: function(response) {
            // 提交成功后执行原有交互逻辑
            form.style.display = "none";
            opTag.innerHTML = "Thank you. Your form has been sent.";
            var expDate = new Date();
            expDate.setTime(expDate.getTime() + (24 * 60 * 60 * 1000 * 1000));
            $.cookie("hidepopup", "hide", { path: '/', expires: expDate });
        },
        error: function(xhr) {
            // 提交失败时显示错误提示
            var errorMsg = xhr.responseJSON?.data || "Oops, something went wrong. Please try again.";
            opTag.innerHTML = errorMsg;
            opTag.style.color = "red";
        }
    });
}

form.addEventListener('submit', submitForm);

2. 调整PHP代码（处理AJAX请求并返回响应） #

修改原有的send_mail函数，添加AJAX响应逻辑，确保订阅结果能反馈给前端：

// 触发表单提交处理逻辑
send_mail();

function send_mail() {
    if (isset($_POST['send-form'])) {
        $apiKey = 'xxxxxxx'; // 替换为你的MailChimp API密钥
        $users_email = $_POST['users_email'];
        $list_id = 'xxxxxxx'; // 替换为你的MailChimp列表ID
        $server = explode('-', $apiKey);

        $url = 'https://' . $server[1] . '.api.mailchimp.com/3.0/lists/' . $list_id . '/members/';

        $response = wp_remote_post(
            $url,
            [
                'method'      => 'POST',
                'data_format' => 'body',
                'timeout'     => 45,
                'headers'     => [
                    'Authorization' => 'apikey ' . $apiKey,
                    'Content-Type'  => 'application/json; charset=utf-8',
                ],
                'body'        => json_encode(
                    [
                        'email_address' => $users_email,
                        'status'        => 'subscribed',
                        'status_if_new' => 'subscribed',
                    ]
                )
            ]
        );

        // 根据MailChimp响应返回结果给前端
        if (is_wp_error($response)) {
            wp_send_json_error($response->get_error_message());
        } else {
            $body = json_decode(wp_remote_retrieve_body($response), true);
            if ($body['status'] === 'subscribed') {
                wp_send_json_success();
            } else {
                wp_send_json_error($body['title']);
            }
        }
    }
}

关键说明 #

• AJAX提交：通过FormData自动收集表单数据，异步发送给PHP，避免页面刷新
• 响应处理：PHP用wp_send_json_success/error返回JSON格式的结果，前端根据结果更新页面提示
• 依赖检查：确保页面已加载jQuery库（因为用到了$.ajax和$.cookie）
• 参数替换：务必将$apiKey和$list_id替换为你自己的MailChimp密钥和列表ID

内容的提问来源于stack exchange，提问作者Lubo Masura