WordPress插件中使用AJAX修改WooCommerce订单状态无响应求助

核心问题排查与修复项 #

• 选择器错误：jQuery选择类名需要加.前缀，原代码$('pluginchangebutton')要改成$('.pluginchangebutton')
• 方法名拼写错误：e.preventdefault()是驼峰命名，正确写法是e.preventDefault()
• AJAX返回格式不匹配：你指定了dataType: 'json'但PHP端没有返回JSON格式数据，会直接触发error回调
• 重复注册JS事件：你在循环里每个按钮都调用一次my_action_javascript，会导致同一个点击事件被绑定N次，严重影响性能
• 按钮属性语法错误：HTML按钮的class属性没有加引号，应该是class="pluginchangebutton"
• 传参错误：my_action_javascript接收的是订单ID，你循环里传的是$_order对象，需要传$order_id

修复后代码 #

1. 全局AJAX处理与JS注入代码（放在插件文件顶部，不要写到循环里） #

// 注册AJAX回调
add_action( 'wp_ajax_my_action', 'my_action' );
add_action( 'wp_ajax_nopriv_my_action', 'my_action' ); // 允许未登录用户调用时需要加此行
function my_action() {
    if ( isset($_POST['order_id']) && (int)$_POST['order_id'] > 0 ) {       
        $order = wc_get_order( (int)$_POST['order_id'] ); 
        if($order){
            $order->update_status('completed');
            wp_send_json_success( 'status updated' ); // 按要求返回JSON格式成功响应
        }
    }
    wp_send_json_error( 'invalid order id' ); // 返回JSON格式错误响应
}

// 统一注入JS代码，全局只加载一次
add_action('wp_footer', 'inject_my_custom_js');
function inject_my_custom_js(){
    ?>
    <script type="text/javascript">
    jQuery(function($){
        // 使用事件委托适配动态加载的表格内容
        $(document).on('click', '.pluginchangebutton', function(e){
            e.preventDefault();
            // 从按钮自定义属性获取对应订单ID
            const order_id = $(this).data('order_id');
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: "<?php echo admin_url('admin-ajax.php'); ?>",
                data: {
                    'action': 'my_action',
                    'order_id': order_id,
                },
                success: function(response) {
                    alert('订单状态更新成功');
                    // 可在此处添加按钮文本修改、行状态刷新等后续逻辑
                },
                error: function(xhr, status, error) {
                    console.log(error);
                    alert('更新失败');
                }
            });
        });
    });
    </script>
    <?php
}

2. 表格渲染部分修改 #

// 循环渲染表格行部分修改
foreach ($recent_orders as $recent_order) {
    $order_id = $recent_order->get_id();
    // ... 原有订单字段获取逻辑保持不变 ...

    // 按钮部分修改，删除原有my_action_javascript调用，把订单ID存在data属性中
    $content .= "<td>" . esc_html($order_javena) ."<br>";
    $content .= "<button class='pluginchangebutton' type='button' data-order_id='".esc_attr($order_id)."'>Потврди</button>";
    $content .="</td>";

    // ... 原有其他渲染逻辑保持不变 ...
}

补充注意事项 #

• 不要在PHP输出内容之前调用header("Refresh")，如果有前置输出会导致header设置失效，建议改成JS方式实现页面刷新
• 按钮类型不要用submit，改成type="button"避免触发表单默认提交行为
• 所有输出到前端的变量都要做转义，订单ID输出到HTML属性要加esc_attr()处理

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