AJAX POST提交文本值到PHP时dataType设为JSON不生效问题

设置dataType: 'JSON'后功能失效是两个低级错误导致的：

• 重复解析JSON：jQuery的ajax方法配置dataType: 'JSON'后，会自动将后端返回的合法JSON字符串反序列化为JavaScript对象，你在success回调中额外执行data = $.parseJSON(data)，相当于对已经是对象类型的data再次做JSON解析，会直接触发语法错误，阻断后续DOM渲染逻辑。
• 后端返回的JSON格式不合法：PHP端在输出JSON前如果存在多余输出（比如文件开头的BOM头、php标签外的空格、调试打印内容、报错信息），会导致jQuery判定响应内容不符合JSON规范，直接触发error回调，不会进入你写的success逻辑。

前端代码调整 #

删除success回调中多余的JSON解析代码，可选添加error回调方便调试：

function view_record2()
{
    $("#searchbox").keyup(function()
    {
        var searchword = $(this).val();
        $.ajax({
            url: 'view.php',
            method: 'post',
            data: {searchword: searchword},
            dataType: 'JSON',
            success: function(data)
            {
                // 移除$.parseJSON调用，jQuery已完成自动解析
                if(data.status === 'success'){
                    $('#table').html(data.html);
                }
            },
            error: function(xhr){
                // 调试阶段可取消下方注释，查看后端实际返回内容定位问题
                // console.log(xhr.responseText);
            }
        })
    })
}

后端PHP代码调整 #

在输出JSON前清空缓冲区的多余内容，设置正确的JSON响应头，输出后终止程序避免后续多余输出：

function display_record2()
{
    global $con;
    $search = $_POST['searchword'];
    $value = '<table class="table table-bordered">
                <tr>
                    ......';
    $value .= '</table>';

    ob_clean(); // 清空之前的所有输出内容
    header('Content-Type: application/json; charset=utf-8'); // 声明JSON响应头
    echo json_encode([
        'status' => 'success',
        'html' => $value
    ], JSON_UNESCAPED_UNICODE); // 加第二个参数避免中文被转义乱码
    exit; // 终止后续执行，防止多余内容破坏JSON结构
}

如果修改后仍有问题，打开浏览器开发者工具的「网络」面板，找到view.php的POST请求，查看「响应」标签页的内容，只要返回内容是没有多余前缀/后缀的纯JSON字符串，功能就能正常运行。

内容的提问来源于stack exchange，提问作者Gökhan Gokfen