如何实现支持POST提交表单的单页应用（SPA）？

嘿，看你是在WordPress里搭了个SPA，靠加载主题里的PHP文件运行，还写了AJAX处理函数对吧？要让这个SPA支持POST提交表单，咱们可以这么一步步来搞：

1. 完善后端AJAX处理函数（在functions.php中） #

首先把你没写完的AJAX函数补全，还要适配POST请求的处理逻辑，用WordPress提供的wp_send_json系列函数返回响应，比wp_die更适合AJAX场景：

add_action('wp_ajax_wczytaj_sekcje_profilu', 'ajax_wczytaj_sekcje_profilu');
// 如果你的SPA需要支持未登录用户提交表单，就加上下面这个action
add_action('wp_ajax_nopriv_wczytaj_sekcje_profilu', 'ajax_wczytaj_sekcje_profilu');

function ajax_wczytaj_sekcje_profilu() {
    // 先验证请求方法是否为POST
    if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
        wp_send_json_error('仅支持POST请求');
    }

    // 验证用户登录状态（根据你的业务需求调整，不需要的话可以删掉）
    if (!is_user_logged_in()) {
        wp_send_json_error('Musisz być zalogowany.');
    }

    // 接收POST过来的表单数据
    $form_data = isset($_POST['form_data']) ? $_POST['form_data'] : [];
    
    // 这里可以加表单字段验证，比如检查必填项
    if (empty($form_data['email'])) {
        wp_send_json_error('邮箱字段不能为空');
    }

    // 处理你的业务逻辑，比如获取用户Stripe ID、更新用户资料等
    $current_user = wp_get_current_user();
    $stripe_id = get_field('stripe_id_klienta', 'user_' . $current_user->ID);
    // 举个例子：更新用户邮箱
    update_user_meta($current_user->ID, 'user_email', $form_data['email']);

    // 返回成功响应，还可以带需要的数据给前端更新视图
    wp_send_json_success([
        'message' => '表单提交成功',
        'user_info' => [
            'user_id' => $current_user->ID,
            'stripe_id' => $stripe_id
        ]
    ]);
}

2. 前端SPA处理表单提交 #

在你的SPA前端代码里，监听表单的submit事件，阻止默认的页面跳转，用fetch或者你习惯的AJAX工具发送POST请求到WordPress的AJAX入口admin-ajax.php：

// 假设你的表单ID是profile-form
document.getElementById('profile-form').addEventListener('submit', async (e) => {
    e.preventDefault(); // 阻止默认的页面刷新跳转

    // 收集表单里的所有数据
    const formElement = e.target;
    const formData = new FormData(formElement);
    const submitData = Object.fromEntries(formData.entries());

    try {
        const response = await fetch('/wp-admin/admin-ajax.php', {
            method: 'POST',
            body: new URLSearchParams({
                action: 'wczytaj_sekcje_profilu', // 对应后端定义的AJAX action名称
                form_data: submitData // 把表单数据传过去
            })
        });

        const result = await response.json();
        if (result.success) {
            alert(result.data.message);
            // 这里可以更新SPA的视图，比如刷新用户资料展示区域
        } else {
            alert(result.data);
        }
    } catch (error) {
        console.error('表单提交出错:', error);
        alert('提交失败，请稍后重试');
    }
});

3. 必加的安全防护：CSRF验证 #

这一步千万不能省！WordPress要求AJAX请求要验证nonce来防止跨站请求伪造攻击：

• 首先在你的SPA入口PHP文件里，生成并输出nonce字段：

// 生成nonce，第一个参数是自定义的验证标识，要和后端保持一致
wp_nonce_field('wczytaj_sekcje_profilu_nonce', 'security_token');

• 然后前端把这个nonce加到POST参数里：

// 页面加载时获取nonce
const securityToken = document.querySelector('input[name="security_token"]').value;

// 在请求的body里加上这个参数
body: new URLSearchParams({
    action: 'wczytaj_sekcje_profilu',
    security_token: securityToken,
    form_data: submitData
})

• 最后在后端的AJAX函数开头，加上nonce验证：

function ajax_wczytaj_sekcje_profilu() {
    // 先验证nonce
    if (!wp_verify_nonce($_POST['security_token'], 'wczytaj_sekcje_profilu_nonce')) {
        wp_send_json_error('非法请求，请刷新页面重试');
    }

    // 后面的请求方法验证、用户登录验证等逻辑...
}

4. 额外注意事项 #

• 如果你的SPA有自定义路由（比如/profile/settings这种），要在WordPress里配置重写规则，让所有SPA路由都指向你的SPA入口PHP文件，避免出现404。
• 表单数据量大的话，可以用FormData直接作为请求body，不用转成对象，这样还能支持文件上传。
• 调试的时候可以用浏览器的开发者工具，在Network面板里看POST请求的参数和响应，排查问题更方便。

这样一套流程走下来，你的WordPress内嵌SPA就能安全、顺畅地处理POST表单提交啦，既符合WordPress的安全规范，又能保持SPA的单页体验～

内容来源于stack exchange