Uncaught SyntaxError JSON解析报错 新增分类未入库问题排查求助

1. 前端JSON解析错误原因 #

后端PHP运行时先输出了Notice级错误信息：Undefined index: error in D:\Honlap\xampp\htdocs\eshop\app\controllers\ajax.php on line 17，PHP默认的错误输出是HTML格式，开头就是<字符，之后才输出你拼接的JSON字符串，导致整体返回内容不是合法JSON，前端JSON.parse执行失败就抛出了Unexpected token < in JSON的报错。

2. 分类未写入数据库原因 #

核心问题有3个：

• 第17行判断逻辑错误：你直接读取$_SESSION['error']但没有提前判断该键是否存在，即使$category->create()执行失败写入了$_SESSION['error']，当前判断逻辑也会先抛Notice，打断正常执行流
• 未校验创建方法返回结果：你调用创建方法后直接判断$_SESSION['error']，如果创建方法执行失败但没有写入$_SESSION['error']，就会直接走成功分支返回添加成功的提示，实际数据根本没写入数据库
• 前端提交逻辑漏洞：collect_data方法中输入校验不合法弹出提示后没有终止执行，会把空值、纯数字等不合法内容提交到后端，也会导致创建失败

第一步：修复后端第17行的session判断逻辑 #

把第17行的判断改成先判断键是否存在，再判断值是否非空：

// 原代码（第17行）
if($_SESSION['error'] != ""){
// 修改后
if(isset($_SESSION['error']) && $_SESSION['error'] != ""){

如果你的项目没有全局启动session，还需要在index()方法最开头加一行：

session_start();

第二步：增加创建方法返回值判断 #

如果$category->create()方法执行成功返回true、失败返回false的话，在判断session之前先判断创建结果：

$check = $category->create($data);
// 新增判断
if(!$check){
    $arr['message'] = "分类创建失败，请检查输入";
    $arr['message_type'] = "error";
    $arr['data'] = "";
    echo json_encode($arr);
    exit;
}
// 后面再接原来的session判断逻辑

第三步：修复前端提交逻辑漏洞 #

在collect_data方法的输入校验后加终止执行的逻辑：

function collect_data(e){
    var category_input = document.querySelector("#category");
    if(category_input.value.trim() == "" || !isNaN(category_input.value.trim())){
        alert("Please enter a valid category name");
        return; // 新增这行，校验不通过就不往下执行
    }
    var data = category_input.value.trim();
    send_data({
        data:data,
        data_type:'add_category'
    });
}

第四步：（可选）优化配置与调试逻辑 #

• 生产环境关闭PHP错误输出到响应体，在项目入口文件加配置，避免PHP错误信息污染接口返回：

// 关闭错误输出到页面
ini_set('display_errors', 0);
// 错误信息写入日志即可
ini_set('log_errors', 1);

• 前端增加JSON解析错误捕获，避免控制台直接抛出异常：

function handle_result(result){
    if(result != ""){
        try{
            var obj = JSON.parse(result);
            // 原有逻辑保留
            if(typeof obj.message_type != 'undefined'){
                if(obj.message_type == "info"){
                    alert(obj.message);
                    show_add_new();
                }
                else{
                    alert(obj.message);
                }
            }
        }catch(e){
            console.log("接口返回非JSON内容：", result);
            alert("系统异常，请稍后重试");
        }
    }
}

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