求助：解决WooCommerce订单费用更新表单POST 400错误

核心问题根源 #

• 缺失WordPress安全Nonce验证：admin-ajax.php强制要求POST请求携带有效nonce，否则直接返回400错误，这是WordPress的核心安全机制。
• 表单元素类型错误：费用说明字段用了<input type="textarea">，这是无效HTML，需替换为标准<textarea>标签。
• 未支持非登录用户：当前仅注册了wp_ajax_钩子，若配送人员在前端未登录后台，请求会被拒绝。
• 输入数据无安全验证：直接使用$_POST原始数据，未验证订单有效性、金额合法性，可能触发后续逻辑错误。

修复后的完整代码 #

前端表单与JS部分 #

<form id="expense_form" class="expense_form">
    <!-- 添加安全验证nonce字段 -->
    <?php wp_nonce_field( 'update_order_expense_nonce', 'expense_nonce' ); ?>
    
    <label>Order Number</label>
    <input class="exp_order_no" id="exp_order_no" type="text" pattern="[0-9]*" placeholder="Enter the Order Number" required>
    
    <label>Expense Amount</label>
    <input class="expense_amt" id="expense_amt" type="number" step="0.01" placeholder="Enter the expense amt" required>
    
    <label>Expense Reason</label>
    <!-- 修正为标准textarea标签 -->
    <textarea class="expense_reason" id="expense_reason" placeholder="Enter Message" required></textarea>
    
    <button class="exp_but" id="exp_but">Submit</button>
</form>

<script>
jQuery(document).ready(function($) {
    $('#expense_form').on('submit', function(e) {
        e.preventDefault();
        
        var orderid = $('#exp_order_no').val();
        var expense = $('#expense_amt').val();
        var expense_reason = $('#expense_reason').val();
        var nonce = $('#expense_nonce').val(); // 获取nonce值
        
        $.ajax({
            url: '<?php echo admin_url('admin-ajax.php'); ?>',
            type: 'POST',
            data: {
                action: 'update_custom_field_order_expense',
                expense_nonce: nonce, // 传递nonce用于验证
                orderid: orderid,
                expense: expense,
                expense_reason: expense_reason
            },
            success: function(response) {
                if (response.success) {
                    console.log('Custom field updated successfully.');
                    // 可选：提交成功后清空表单
                    $('#expense_form')[0].reset();
                } else {
                    console.log('Error: ' + response.data.message);
                }
            },
            error: function(xhr) {
                console.log('Failed to update custom field. Status: ' + xhr.status);
            }
        });
    });
});
</script>

PHP后端部分 #

// 同时支持登录/非登录用户请求
add_action( 'wp_ajax_update_custom_field_order_expense', 'update_custom_field_order_expense' );
add_action( 'wp_ajax_nopriv_update_custom_field_order_expense', 'update_custom_field_order_expense' );

function update_custom_field_order_expense() {
    // 1. 验证nonce合法性
    if ( !isset($_POST['expense_nonce']) || !wp_verify_nonce($_POST['expense_nonce'], 'update_order_expense_nonce') ) {
        wp_send_json_error( array('message' => 'Invalid security token.') );
    }

    // 2. 过滤并验证输入数据
    $order_id = absint($_POST['orderid']);
    $expense = floatval($_POST['expense']);
    $expense_reason = sanitize_textarea_field($_POST['expense_reason']);

    // 3. 检查订单是否存在
    $order = wc_get_order($order_id);
    if ( !$order ) {
        wp_send_json_error( array('message' => 'Invalid order ID.') );
    }

    // 4. 更新订单元数据
    $order->update_meta_data( 'Driver Expense', $expense );
    $order->update_meta_data( 'Driver Expense Reason', $expense_reason );
    $order->save();

    wp_send_json_success();
}

额外优化点 #

• 给表单添加<label>标签，提升可访问性和用户体验
• 将金额输入框改为type="number"并设置step="0.01"，限制输入合法数值
• 在AJAX回调中返回具体错误信息，方便调试
• 提交成功后重置表单，优化操作流程

内容的提问来源于stack exchange，提问作者Rishikesh Dubey