如何使用Ajax调用指定PHP函数：解决评论系统双功能共存失效问题

你现在的核心问题是**include.php同时输出了两个JSON结果**——因为你直接在文件末尾同时调用了main()和totalComment()，导致返回的内容是两个JSON字符串拼接在一起（比如[{"id":1,"content":"xxx"}][5]），这种格式完全不符合JSON规范，AJAX自然无法正确解析，两个功能都会失效。

我们需要让前端通过参数告诉PHP要执行哪个函数，每次只返回一个合法的JSON结果。下面是修改后的完整代码：

1. 修改PHP文件（include.php） #

// 假设你已经有这个数据库连接函数，确保它能正常返回PDO实例
function connect() {
    $dsn = 'mysql:host=localhost;dbname=你的数据库名;charset=utf8mb4';
    $username = '你的用户名';
    $password = '你的密码';
    try {
        return new PDO($dsn, $username, $password, [
            PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
        ]);
    } catch(PDOException $e) {
        die(json_encode(['error' => '数据库连接失败：'.$e->getMessage()]));
    }
}

// 获取评论列表
function getComments(){
 try {
    $query = connect()->prepare("SELECT * FROM comments WHERE article_id = 1627359589");
    $query->execute();
    // 用FETCH_ASSOC返回关联数组，前端更易处理字段
    echo json_encode($query->fetchAll(PDO::FETCH_ASSOC));
 } catch (PDOException $e) {
    die(json_encode(['error' => '获取评论失败：'.$e->getMessage()]));
 }
}

// 获取评论总数（用COUNT(*)比rowCount()效率高很多）
function getCommentTotal(){
 try {
    $sql ="SELECT COUNT(*) FROM comments WHERE article_id = 1627359589";
    $stmt = connect()->prepare($sql);
    $stmt->execute();
    $num = $stmt->fetchColumn();
    // 把数字包装成对象，避免单独返回数字可能的解析问题
    echo json_encode(['total' => $num]);
 } catch (PDOException $e) {
    die(json_encode(['error' => '获取评论总数失败：'.$e->getMessage()]));
 }
}

// 根据前端传来的action参数，执行对应函数
if(isset($_POST['action'])){
    switch($_POST['action']){
        case 'fetch_comments':
            getComments();
            break;
        case 'fetch_total':
            getCommentTotal();
            break;
        default:
            echo json_encode(['error' => '无效的请求参数']);
    }
}

2. 修改AJAX代码 #

// 刷新评论列表（优化：每次先清空旧评论，避免重复追加）
setInterval(displayComments, 2000);
function displayComments(){
 $.ajax({
 url: "include.php",
 type: "POST",
 dataType: "JSON",
 // 告诉PHP要执行"获取评论"的操作
 data: { action: 'fetch_comments' },
 success: function(data){
     if(data.error){
         console.error('加载评论出错：', data.error);
         return;
     }
     $("ul").empty(); // 清空旧评论
     data.forEach(item => {
         // 替换成你评论表中实际的内容字段，比如item.content
         $("ul").append(`<li>${item.content}</li>`);
     });
 },
 error: function(xhr){
     console.error('请求评论接口失败');
 }
 })
}

// 刷新评论总数
setInterval(updateCommentTotal, 2000);
function updateCommentTotal(){
 $.ajax({
 url: "include.php",
 type: "POST",
 dataType: "JSON",
 // 告诉PHP要执行"获取总数"的操作
 data: { action: 'fetch_total' },
 success: function(data){
     if(data.error){
         console.error('加载评论总数出错：', data.error);
         return;
     }
     $("h3").text(`评论总数：${data.total}`);
 },
 error: function(xhr){
     console.error('请求评论总数接口失败');
 }
 })
}

1. 避免请求堆积：不要用固定间隔的setInterval，改成请求完成后再延迟下一次请求（比如在success里调用setTimeout(displayComments, 2000)），防止网络慢时多个请求同时发送。
2. 增量加载评论：记录最后一次加载的评论ID，下次只查询ID大于这个值的新评论，减少数据库压力和带宽消耗。
3. 防XSS攻击：如果评论内容是用户输入的，要用$(document.createElement('li')).text(item.content)代替直接拼接HTML，避免跨站脚本攻击。

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