WordPress中AJAX提交表单遇JSON解析错误：Unexpected token < in position 1

这个错误我熟得很——本质就是你的AJAX请求明明期望返回纯JSON，但服务器实际返回了HTML内容（比如错误提示、WordPress的调试信息，甚至是多余的空白字符），JSON解析器一碰到<直接就懵了，报错也就理所当然。咱们一步步来修复：

先拆解你的代码问题 #

1. PHP钩子不完整

你贴的PHP代码只写了wp_ajax_call_store_voting钩子，非登录用户的请求会直接被WordPress拒绝，返回403的HTML页面，这肯定会触发JSON解析错误。另外，你的处理函数大概率没正确终止输出，导致WP后续的HTML内容混进了响应里。

2. AJAX请求的几个小疏漏

• 你用$(this).attr('action')作为请求URL，但WordPress的AJAX请求必须指向admin-ajax.php，不然WP没法识别你的钩子逻辑
• 没有明确传递action参数，WP根本不知道该调用哪个处理函数

具体修复方案 #

第一步：完善PHP处理逻辑（functions.php）

// 同时添加登录/非登录用户的钩子，确保所有用户都能触发
add_action('wp_ajax_call_store_voting', 'store_voting');
add_action('wp_ajax_nopriv_call_store_voting', 'store_voting');

function store_voting() {
    // 必加：CSRF验证，防止恶意请求（表单里要对应加nonce字段）
    check_ajax_referer('voting_submit_nonce', 'nonce');

    // 处理表单数据，记得做安全过滤
    $vote_option = isset($_POST['vote_option']) ? sanitize_text_field($_POST['vote_option']) : '';

    // 准备响应
    if (!empty($vote_option)) {
        // 这里写你的业务逻辑，比如把投票数据存数据库
        wp_send_json_success('投票已成功保存！'); // 自动返回JSON并终止WP后续输出
    } else {
        wp_send_json_error('请选择投票选项');
    }

    // 注意：wp_send_json系列函数会自动die，不需要额外加exit/die
}

关键提醒：绝对不要在这个函数里用echo、print、var_dump，任何额外输出都会破坏JSON响应。另外，检查你的functions.php开头/结尾有没有多余的空白（比如?>之后的换行），这也会导致响应开头多了空白字符，触发解析错误。

第二步：修复前端AJAX代码

// 假设你的表单ID是voting-form
jQuery(document).on('submit', '#voting-form', function(e) {
    e.preventDefault(); // 阻止表单默认提交行为

    // 序列化表单数据，如果有文件上传就用new FormData(this)
    var formData = jQuery(this).serialize();
    // 必须加上action参数，值要和PHP钩子的后缀完全一致（call_store_voting）
    formData += '&action=call_store_voting';

    jQuery.ajax({
        url: '<?php echo admin_url('admin-ajax.php'); ?>', // 固定指向WP的AJAX入口
        type: 'POST',
        dataType: 'JSON',
        data: formData,
    })
    .done(function(response) {
        if (response.success) {
            console.log('操作成功：', response.data);
            // 这里可以写成功后的UI逻辑，比如显示成功提示
        } else {
            console.log('操作失败：', response.data);
        }
    })
    .fail(function(xhr) {
        console.log('请求失败，服务器返回内容：');
        console.log(xhr.responseText); // 打印返回的HTML，方便排查具体问题
    });
});

别忘了在你的表单里添加对应nonce字段，不然PHP的check_ajax_referer会直接拒绝请求：

<form id="voting-form">
    <!-- 你的表单选项，比如单选框 -->
    <input type="radio" name="vote_option" value="option1"> 选项1
    <input type="radio" name="vote_option" value="option2"> 选项2
    
    <!-- 必加的nonce字段 -->
    <?php wp_nonce_field('voting_submit_nonce', 'nonce'); ?>
    <button type="submit">提交投票</button>
</form>

最后排查技巧 #

如果还是报错，打开浏览器开发者工具的Network标签，找到你的AJAX请求，查看Response内容——你会看到实际返回的是HTML（比如错误页面、WP的调试信息），根据这个HTML就能快速定位问题：

• 如果是403页面：检查nonce是否正确，或者钩子有没有加对
• 如果是PHP警告/错误：查看WP的错误日志，修复代码里的语法或逻辑问题
• 如果是空白字符：检查functions.php或其他插件/theme的多余输出

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