WordPress中AJAX提交表单插入数据库出现404错误求助

问题现象 #

通过AJAX实现WordPress表单无刷新提交并插入数据库，点击提交后出现404页面未找到错误，控制台日志显示请求地址为POST https://website.com/page/?preview_id=2155&preview_nonce=865f9a58ce&preview=true 404 (Not Found)，表单提交后直接跳转页面。

现有代码 #

主题functions.php后端代码 #

//set_data action 
add_action( 'wp_ajax_set_data', 'my_ajax_foobar_handler' );
add_action( 'wp_ajax_nopriv_set_data', 'my_ajax_foobar_handler' );

function my_ajax_foobar_handler() {

    
    $name = $_POST['name_f'];
    $email = $_POST['email_f'];
    
    $data = array("name" => $name, "email"=>$email);
    global $wpdb;
    global $table_prefix;
    $table = $table_prefix.'contact_form';

    $result = $wpdb->insert($table, array(
    'name' => $name,
    'email' => $email
));

wp_send_json_success($result);

    header("Content-Type: application/json");
    echo json_encode($data);

    
    wp_die();
}

前端代码 #

<?php echo '<form method="POST" id="form">
<table>
<tr>
    <td>name</td>
    <td><input type="text" id="name_field" name="name"></td>
</tr>
<tr>
    <td>email</td>
    <td><input type="email" id="email_field" name="email"></td>
</tr>
<tr>
    
    <td><input type="submit" id="form_submit" name="submit"></td>
</tr>
</table>
</form>';?>



<script>


jQuery('#form').on('submit', function (event) {

        var formData = {
        action: 'set_data',
       name_f: $("#name_field").val(),
       email_f: $("#email_field").val()
      
    };

    

        $.ajax({
            url : '<?php echo admin_url('admin-ajax.php'); ?>',
            data : formData,
            type : 'POST',
            // contentType: "application/json; charset=utf-8",
            dataType : 'json',
            success : function (request) {

                console.log(typeof request);

                console.log(request);

            }
        });

        
    event.preventDefault();
    });
   
 
</script>

<?

问题根源 #

1. 表单默认提交未及时阻止：event.preventDefault()放在AJAX请求之后，导致表单先执行默认POST跳转，AJAX请求还未完成就触发页面跳转，出现404。
2. 后端代码冗余：wp_send_json_success()会自动输出JSON并终止程序，后续的header、echo json_encode和wp_die()属于冗余代码，可能导致输出异常。
3. 缺少输入验证和安全过滤：直接使用$_POST数据，存在SQL注入和XSS风险。

修复步骤 #

1. 调整前端JS，提前阻止表单默认行为 #

将event.preventDefault()移到事件处理函数开头，确保表单不会跳转：

jQuery('#form').on('submit', function (event) {
    // 优先阻止表单默认提交行为
    event.preventDefault();

    var formData = {
        action: 'set_data',
        name_f: $("#name_field").val(),
        email_f: $("#email_field").val()
    };

    $.ajax({
        url : '<?php echo admin_url('admin-ajax.php'); ?>',
        data : formData,
        type : 'POST',
        dataType : 'json',
        success : function (response) {
            console.log(typeof response);
            console.log(response);
        },
        // 增加错误处理，便于调试
        error: function(xhr, status, error) {
            console.error('AJAX请求失败:', error);
        }
    });
});

2. 优化后端代码，清理冗余并增加安全验证 #

删除冗余代码，添加输入过滤和错误判断：

// set_data action 
add_action( 'wp_ajax_set_data', 'my_ajax_foobar_handler' );
add_action( 'wp_ajax_nopriv_set_data', 'my_ajax_foobar_handler' );

function my_ajax_foobar_handler() {
    // 安全获取并过滤用户输入
    $name = isset($_POST['name_f']) ? sanitize_text_field($_POST['name_f']) : '';
    $email = isset($_POST['email_f']) ? sanitize_email($_POST['email_f']) : '';

    // 验证输入非空
    if(empty($name) || empty($email)){
        wp_send_json_error('姓名和邮箱不能为空');
    }

    global $wpdb;
    // 使用wpdb内置前缀变量更规范
    $table = $wpdb->prefix . 'contact_form';

    $result = $wpdb->insert($table, array(
        'name' => $name,
        'email' => $email
    ));

    // 根据插入结果返回对应状态
    if($result){
        wp_send_json_success('数据插入成功');
    } else {
        wp_send_json_error('数据插入失败');
    }
}

3. 可选增强：添加Nonce验证提升安全性 #

在表单中添加nonce字段：

<?php echo '<form method="POST" id="form">
<!-- 添加nonce验证字段 -->
<input type="hidden" name="form_nonce" value="' . wp_create_nonce('contact_form_nonce') . '">
<table>
<!-- 原有表单内容 -->
</table>
</form>';?>

在后端函数开头添加验证：

function my_ajax_foobar_handler() {
    // 验证nonce
    check_ajax_referer('contact_form_nonce', 'form_nonce');
    
    // 后续原有代码...
}

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