WordPress分类商品表单AJAX提交至数据库方案问询

问题2：PHP AJAX回调与JS间传递数据 #

在WordPress环境下，我们可以利用官方AJAX机制实现，分PHP后端和JS前端两部分处理：

PHP后端（回调函数）

首先在主题functions.php中注册AJAX回调，同时做好安全验证：

// 注册AJAX回调，支持登录/未登录用户访问
add_action('wp_ajax_add_group_cart', 'handle_group_cart_submit');
add_action('wp_ajax_nopriv_add_group_cart', 'handle_group_cart_submit');

function handle_group_cart_submit() {
    // 验证nonce，确保请求合法
    if (!isset($_POST['_gs_nonce']) || !wp_verify_nonce($_POST['_gs_nonce'], 'your_nonce_action')) {
        wp_send_json_error(['message' => '非法请求']);
    }

    // 复用问题1的数组转换逻辑
    $formattedData = [];
    if (isset($_POST['product_option'], $_POST['qty'], $_POST['product'])) {
        $totalItems = count($_POST['product']);
        for ($i = 0; $i < $totalItems; $i++) {
            $formattedData[] = [
                'product_option' => $_POST['product_option'][$i] ?? '',
                'qty' => (int)($_POST['qty'][$i] ?? 1),
                'product' => (int)($_POST['product'][$i] ?? 0)
            ];
        }
    }

    // 执行数据库插入操作（以wpdb为例）
    global $wpdb;
    $tableName = $wpdb->prefix . 'group_cart'; // 替换为你的购物车表名
    $success = true;

    foreach ($formattedData as $item) {
        // 跳过商品ID为空的无效项
        if (empty($item['product'])) continue;
        
        $insertResult = $wpdb->insert(
            $tableName,
            [
                'product_id' => $item['product'],
                'option_id' => $item['product_option'],
                'quantity' => $item['qty'],
                'group_id' => $_POST['group_id'] ?? 0
            ],
            ['%d', '%s', '%d', '%d'] // 字段类型格式化
        );

        if (!$insertResult) {
            $success = false;
            break; // 有一条失败就终止循环
        }
    }

    // 返回JSON响应给前端
    if ($success) {
        wp_send_json_success([
            'message' => '所有商品已成功加入团购购物车',
            'addedItems' => count($formattedData)
        ]);
    } else {
        wp_send_json_error(['message' => '部分商品加入失败，请检查后重试']);
    }
}

这里用wp_send_json_success和wp_send_json_error会自动设置正确响应头并退出程序，无需手动处理。

JS前端（AJAX请求）

用jQuery实现提交逻辑更简洁，确保主题已加载jQuery：

// 假设表单ID为group-purchase-form
$('#group-purchase-form').on('submit', function(e) {
    e.preventDefault(); // 阻止表单默认刷新提交

    // 获取表单所有数据
    const formData = $(this).serialize();

    // 发送AJAX请求
    $.ajax({
        url: groupCartVars.ajaxurl, // 该变量需在PHP中本地化传递
        type: 'POST',
        data: formData + '&action=add_group_cart', // 附加AJAX动作名
        dataType: 'json',
        success: function(response) {
            if (response.success) {
                // 成功后的处理，比如更新购物车显示
                alert(response.data.message);
                console.log('成功加入' + response.data.addedItems + '件商品');
            } else {
                // 失败提示
                alert(response.data.message);
            }
        },
        error: function(xhr) {
            console.error('请求出错:', xhr.responseText);
            alert('网络错误，请稍后重试');
        }
    });
});

注意groupCartVars.ajaxurl需要在PHP中通过wp_localize_script传递，在functions.php中添加：

function enqueue_group_cart_assets() {
    // 注册并加载自定义JS文件
    wp_enqueue_script(
        'group-cart-js',
        get_template_directory_uri() . '/js/group-cart.js',
        ['jquery'],
        '1.0.0',
        true // 放在页脚加载
    );

    // 传递AJAX地址等变量到前端
    wp_localize_script(
        'group-cart-js',
        'groupCartVars',
        [
            'ajaxurl' => admin_url('admin-ajax.php'),
            'nonce' => wp_create_nonce('your_nonce_action')
        ]
    );
}
add_action('wp_enqueue_scripts', 'enqueue_group_cart_assets');

内容的提问来源于stack exchange，提问作者Code Lover