点击商品选项后图片空白、价格显示NaN的技术问题求助

错误根源解析 #

• Attempt to read property "#" on null：说明option_change.php中用于获取商品信息的变量（如数据库查询结果、商品对象）为null，直接访问其属性（价格、名称、图片路径）导致报错，返回的JSON缺失关键字段，前端解析时就会出现价格NaN、图片空白、名称无变化。
• Deprecated Feature Used：代码使用了PHP已废弃的特性（如旧版数据库扩展mysql_*、过时语法），可能导致数据库查询失败，进而返回null结果。

前端AJAX脚本修复点 #

1. 校验参数传递准确性
   检查AJAX请求是否正确传递选中的颜色、尺寸参数，确保参数名与后端接收的一致。示例：

   $.ajax({
       url: 'option_change.php',
       type: 'POST',
       data: {
           color: $('#color-select').val(),
           size: $('#size-select').val()
       },
       dataType: 'json',
       success: function(data) {
           // 后续处理逻辑
       }
   });
   

2. 增加字段容错处理
   避免因后端返回字段缺失导致的异常，赋值前先判断字段有效性：

   success: function(data) {
       // 处理商品图片
       if (data.image && data.image.trim() !== '') {
           $('#product-image').attr('src', data.image);
       } else {
           $('#product-image').attr('src', '/assets/images/default-product.jpg');
       }
       // 处理商品名称
       if (data.name) {
           $('#product-name').text(data.name);
       }
       // 处理商品价格
       if (data.price && !isNaN(parseFloat(data.price))) {
           $('#product-price').text('¥' + parseFloat(data.price).toFixed(2));
       } else {
           $('#product-price').text('暂无报价');
       }
   }
   

后端option_change.php修复点 #

1. 修复数据库查询逻辑
   改用预处理语句避免SQL注入，同时确保查询条件正确，处理空结果：

   <?php
   // 假设使用PDO连接数据库
   $pdo = new PDO('mysql:host=localhost;dbname=your_db', 'user', 'pass');
   $color = $_POST['color'] ?? '';
   $size = $_POST['size'] ?? '';
   
   // 预处理查询，避免SQL注入
   $stmt = $pdo->prepare("SELECT image_path, product_name, price FROM products WHERE color = ? AND size = ?");
   $stmt->execute([$color, $size]);
   $product = $stmt->fetch(PDO::FETCH_ASSOC);
   
   // 返回标准JSON，处理空结果
   if ($product) {
       echo json_encode([
           'image' => $product['image_path'],
           'name' => $product['product_name'],
           'price' => $product['price']
       ]);
   } else {
       // 返回默认值或提示信息
       echo json_encode([
           'image' => '/assets/images/default-product.jpg',
           'name' => '该规格暂未上架',
           'price' => 0
       ]);
   }
   ?>
   

2. 替换废弃特性

   • 把mysql_*系列函数替换为PDO或mysqli；
   • 检查是否使用了过时的语法（报错中的#为实际属性名占位符，需确认属性名是否存在于数据库表中）。

3. 确保JSON输出纯净
   移除所有调试用的echo、var_dump输出，避免多余内容破坏JSON格式；在输出JSON前添加header('Content-Type: application/json');确保响应头正确。

快速调试步骤 #

1. 前端调试：按F12打开浏览器控制台，切换到Network标签，查看AJAX请求的参数、响应内容，确认是否返回有效JSON。
2. 后端调试：在option_change.php中添加日志记录查询参数和结果，示例：

   error_log("Received params: color=$color, size=$size");
   error_log("Query result: " . print_r($product, true));
   

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