AJAX提交HTML表单到PHP返回JSON附带多余HTML如何解决

问题根因 #

PHP在输出完JSON数据后没有终止执行流程，后续站点框架（你使用的WordPress）的路由逻辑判断当前请求路径不符合现有路由规则，自动输出了404页面的HTML代码，追加到了JSON内容之后，导致整体返回值不是合法JSON格式，无法正常解析。

解决方案 #

• 第一步：PHP输出JSON后立即终止执行
  在你输出JSON的代码后追加exit或die语句，直接中断程序运行，阻止后续多余内容输出：

if(isset($_POST['formInfo']))
{
    update_option('text',$_POST['text']);
    $return = ['success' => 1, 'message' => 'Message Sent'];
    echo json_encode($return);
    // 新增终止执行代码，防止后续输出404页面内容
    exit;
}

• 第二步（可选）：优化AJAX配置提升稳定性
  在前端AJAX请求中添加dataType: 'json'参数，让jQuery自动将合法返回值解析为JSON格式，省去手动解析的步骤，同时如果返回值格式非法会直接触发错误回调，方便调试：

function jvsSubmit(fd){
    var submitUrl = 'repeater_field_capture.php';
    $.ajax({
        type:'post',
        url: submitUrl,
        data: fd,
        contentType: false,
        processData: false,
        dataType: 'json', // 新增配置，指定返回格式为JSON
        success: function(response){ 
            submit_settings_form_callback(response); 
        },
    });
}

• 补充优化建议（WordPress场景专属）
  因为你用到了WordPress专属的update_option函数，更推荐你使用WordPress官方提供的AJAX处理机制（对接admin-ajax.php）或者自定义REST API接口处理表单提交，避免直接请求自定义PHP文件触发框架的路由判断、权限校验、模板渲染等多余逻辑，减少后续兼容性问题。

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