WordPress单选框触发AJAX提交跳转admin-ajax.php问题求助

我来帮你搞定这个问题！核心原因其实很明确：你给单选框加的onclick="this.form.submit()"会直接触发原生表单提交行为，完全绕开了你写的jQuery AJAX提交逻辑，所以才会跳转到admin-ajax.php页面，而不是异步把结果更新到指定的#response容器里。

具体修复步骤 #

1. 移除单选框上的原生onclick属性

首先把表单里单选框的onclick="this.form.submit()"删掉，我们不需要原生提交，把控制权交给jQuery的AJAX逻辑：

<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter" name="filter">
    <input type="hidden" name="action" value="myfilter">
    <?php 
    if( $terms = get_terms( array( 'taxonomy' => 'category', 'orderby' => 'name' ) ) ) : 
        echo '<div class="d-flex justify-content-center">'; 
        $first = true; // 注意初始化$first变量，避免未定义警告
        foreach ( $terms as $term ) : 
            if($first) : 
                echo '<label><input type="radio" class="radio-formular" value="' . $term->term_id . '" name="categoryfilter" checked>' . $term->name.'</label>';
                $first = false;
            else : 
                echo '<label><input type="radio" class="radio-formular" value="' . $term->term_id . '" name="categoryfilter">' . $term->name. '</label>'; 
            endif; 
        endforeach; 
        echo '</div>'; 
    endif; 
    ?>
    <button id="sbm">Apply</button>
</form>

2. 修改JS代码，给单选框绑定change事件触发AJAX提交

我们通过jQuery监听单选框的change事件，当用户切换选中项时，主动触发表单的AJAX提交流程：

jQuery(function($){
    // 表单提交的AJAX核心逻辑
    $('#filter').submit(function(e){
        e.preventDefault(); // 明确阻止原生提交行为
        var filter = $(this);
        
        $.ajax({
            url: filter.attr('action'),
            data: filter.serialize(),
            type: filter.attr('method'),
            beforeSend:function(xhr){
                // 可选：添加加载提示，提升用户体验
                // $('#response').html('<p>加载中...</p>');
            },
            success:function(data){
                $('#response').html(data);
            },
            error:function(xhr, status, error){
                // 可选：添加错误处理
                $('#response').html('<p>加载失败，请重试</p>');
                console.log(error); // 控制台查看错误详情
            }
        });
        return false;
    });

    // 监听单选框切换，触发表单提交
    $('.radio-formular').on('change', function(){
        $('#filter').submit();
    });
});

3. 额外注意：清理functions.php里的冗余代码

我看到你的misha_filter_function里有一行'order' => $_POST['date']，但你的表单里并没有date相关的字段，这可能会导致PHP警告，建议要么添加对应的表单字段，要么删掉这行代码：

function misha_filter_function(){
    $args = array(
        'orderby' => 'date',
        // 'order' => $_POST['date'] // 删掉这行，或者添加对应的表单字段
        'order' => 'DESC' // 可以直接指定默认排序方向
    );
    // ... 其余代码不变
}

为什么之前的preventDefault()没用？ #

因为原生的onclick="this.form.submit()"会优先于jQuery绑定的submit事件执行，当浏览器触发原生提交时，你的jQuery逻辑还没来得及阻止默认行为，页面就已经跳转了。通过移除原生onclick，改用jQuery监听change事件触发AJAX提交，就能让整个流程走我们的异步逻辑啦。

内容的提问来源于stack exchange，提问作者George Iulian Petre