AJAX请求JSON解析报错：Unexpected token '<'，无法展示销售数据

核心错误原因 #

控制台的Uncaught SyntaxError: Unexpected token '<'错误，本质是前端期望后端返回JSON格式数据，但后端实际输出的是HTML表格行代码，导致JSON.parse()无法解析非JSON内容。同时还存在参数不匹配、SQL注入风险等问题。

具体问题点及修复步骤 #

• 前后端参数名称不匹配：前端AJAX传递的参数是fromDate和toDate，但后端PHP里试图获取$_POST['fromdate']和$_POST['todate']（大小写不一致），导致PHP无法正确接收日期参数。
• 后端返回格式错误：后端直接输出HTML<tr>标签，而前端逻辑是解析JSON后渲染表格，两者格式完全不兼容。
• SQL注入风险：后端SQL语句直接拼接用户输入的日期参数，存在严重安全漏洞。

修复后的代码 #

前端脚本修改

<script>
  document.querySelector('#submit-button').addEventListener('click', function(event) {
    event.preventDefault();

    const fromDate = $('#fromdate').val();
    const toDate = $('#todate').val();

    // 清空表格原有内容，避免重复添加
    $('#sales-table tbody').empty();

    $.ajax({
      type: "POST",
      url: "functions/search-sales_function.php",
      data: { fromDate: fromDate, toDate: toDate },
      dataType: "json", // 指定预期返回JSON，无需手动parse
      success: function (salesData) {
        // 循环渲染数据
        salesData.forEach(item => {
          $('#sales-table tbody').append(`
            <tr>
              <td>${item.date}</td>
              <td>${item.total_sales}</td>
            </tr>
          `);
        });
      },
      error: function(xhr, status, error) {
        // 调试用：打印错误信息
        console.log("请求错误:", xhr.responseText);
      }
    });
  });
</script>

后端PHP文件修改

<?php
include "db_conn.php";

// 先检查参数是否存在
$fromDate = $_POST['fromDate'] ?? '';
$toDate = $_POST['toDate'] ?? '';

if (!$conn) {
  http_response_code(500);
  echo json_encode(['error' => 'Connection failed: ' . mysqli_connect_error()]);
  exit;
}

// 使用预处理语句防止SQL注入
$sql = "SELECT date, SUM(sales) as total_sales FROM sales WHERE date BETWEEN ? AND ? GROUP BY date ORDER BY date ASC";
$stmt = mysqli_prepare($conn, $sql);
mysqli_stmt_bind_param($stmt, "ss", $fromDate, $toDate);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);

$salesData = [];
while ($row = mysqli_fetch_assoc($result)) {
  $salesData[] = $row;
}

// 返回JSON格式数据
header('Content-Type: application/json');
echo json_encode($salesData);

// 关闭资源
mysqli_stmt_close($stmt);
mysqli_close($conn);
?>

额外说明 #

• 前端添加dataType: "json"后，jQuery会自动解析JSON，无需手动调用JSON.parse()
• 前端在请求前清空表格tbody，避免多次点击后重复添加数据
• 后端添加参数存在性检查，确保获取到正确的日期值
• 后端使用预处理语句绑定参数，彻底避免SQL注入风险
• 后端设置正确的Content-Type响应头，明确告知前端返回的是JSON数据

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