PHP+MySQL结合Ajax实现点赞功能的完整实例

结果或目标

本例旨在展示如何通过前后端分离的简易架构，实现以下功能：

• 前端页面显示多个独立项目的点赞数。
• 用户点击按钮后，点赞数实时增加且无需刷新页面。
• 利用Cookie限制同一用户在有效期内只能对同一项目点赞一次。
• 后端PHP接收请求并更新MySQL数据库。

准备条件

1. 环境要求：Web服务器（如Apache/Nginx）、PHP运行环境、MySQL数据库。
2. 数据库表结构：假设存在名为 good 的表，包含字段 id (主键) 和 value (点赞数)。
3. 文件结构：前端页面 index.html 与后端处理脚本 index.php。

真实操作顺序

第1步：编写HTML页面结构

目的：构建包含点赞按钮和数字显示的DOM元素，为后续JavaScript绑定事件做准备。

每个点赞项由一个 <span> 标签（显示当前数量）和一个 <button> 按钮组成。按钮通过 onclick 属性调用JS函数，并传入唯一的ID标识。

<span id="like_1">0</span>
<button onclick="goodplus(1);">点赞</button>

<span id="like_2">0</span>
<button onclick="goodplus(2);">点赞</button>

<span id="like_3">0</span>
<button onclick="goodplus(3);">点赞</button>

<span id="like_4">0</span>
<button onclick="goodplus(4);">点赞</button>

第2步：实现前端JavaScript核心逻辑

目的：处理按钮点击、Cookie校验、发起Ajax请求以及更新UI。

主要包含以下几个关键函数：

1. 点赞触发函数 goodplus(gindex)

当用户点击按钮时调用。首先检查是否已点赞，若未点赞则读取当前数值加1，并调用 senddata 发送更新请求；若已点赞，则提示用户。

var span = document.getElementsByTagName('span');
var num;
var flag = 0;

function goodplus(gindex) {
    // flag=1 表示执行点赞（增加），flag=0 表示仅获取最新数据
    flag = 1; 
    // 获取当前span的文本值并转为整数
    num = parseInt(span.item(gindex-1).innerHTML);
    
    if(checkcookie(gindex) == true) {
        num = num + 1;
        senddata(gindex); // 通过Ajax修改页面上的数据
    } else {
        alert("你已经点过赞咯！"); 
    }
}

2. Ajax数据发送函数 senddata(aindex)

目的：与后端 index.php 通信。使用兼容IE的XMLHttpRequest写法（现代开发建议使用fetch或axios，但此例保留原逻辑以便理解基础原理）。

参数说明：
- num: 新的点赞数值
- flag: 操作类型标志（1为点赞，0为拉取）
- aindex: 对应的项目ID

function senddata(aindex){
    var xmlhttp;
    var txt;
    // 创建XHR对象
    if(window.XMLHttpRequest){
        xmlhttp=new XMLHttpRequest();
    }else{
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    xmlhttp.onreadystatechange=function(){
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
            txt = xmlhttp.responseText; // 获取返回的数据
            var cookieindex = aindex - 1;
            // 更新页面显示的数字
            document.getElementsByTagName('span').item(cookieindex).innerHTML = txt;
        }
    }
    
    // 发起GET请求
    xmlhttp.open("GET","/ajax/json/index.php?num=" + num + '&flag=' + flag + '&aindex=' + aindex,true);
    xmlhttp.send();
}

3. Cookie相关辅助函数

为了判断用户是否已点赞，使用三个辅助函数管理浏览器Cookie：

• checkcookie(gindex): 检查是否存在以 'goodplus' + ID 命名的Cookie。若存在返回false（已赞），否则设置新Cookie并返回true（允许赞）。
• getCookie(c_name): 根据名称读取Cookie值。
• setCookie(c_name, value, expiredays): 写入Cookie，默认有效期365天。

// 判断是否已经存在了cookie
function checkcookie(gindex) {
    var thiscookie = 'goodplus' + gindex;
    var mapcookie = getCookie(thiscookie)
    if (mapcookie!=null && mapcookie!="") {
        return false;
    } else {
        setCookie(thiscookie,thiscookie,365);
        return true;
    }  
}

// 获取cookie
function getCookie(c_name){
    if (document.cookie.length > 0){
        c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != -1){           
            c_start = c_start + c_name.length + 1 ;
            c_end = document.cookie.indexOf(";" , c_start);
            if (c_end == -1) {
                c_end = document.cookie.length;
            }
            return unescape(document.cookie.substring(c_start , c_end));
        } 
    }
    return ""; 
}

// 设置cookie
function setCookie(c_name,value,expiredays){
    var exdate=new Date();
    exdate.setDate( exdate.getDate() + expiredays )
    document.cookie = c_name + "=" + escape(value) + ((expiredays==null) ? "" : "; expires=" + exdate.toGMTString())
}

第3步：实现后端PHP接口 index.php

目的：接收前端传来的参数，查询或更新数据库，并返回最新点赞数。

注意：原文使用了已废弃的 mysql_connect 扩展。在实际生产环境中，请务必改用 mysqli 或 PDO 以防止SQL注入并提高安全性。此处保留原文逻辑以供学习历史版本差异。

<?php
$num = $_GET['num'];
$aindex = $_GET['aindex'];

// 建立连接
$con = mysql_connect("localhost","root","");
if (!$con){
    die('Could not connect: ' . mysql_error());
}

// 选择数据库
mysql_select_db("goodplus", $con);

// 查询当前状态
$sql0s = "SELECT * FROM `good` where `id` = ".$aindex;
$sql0 = mysql_query($sql0s);

if($_GET['flag'] == 0){
    // 如果是获取数据模式（flag=0），直接输出当前数据库值
    while($row = mysql_fetch_array($sql0)){
        echo $row['value'];
    }
} else if($_GET['flag'] == 1){
    // 如果是点赞模式（flag=1），更新数据库
    $sql="UPDATE `goodplus`.`good` SET `value` = '".$num."' WHERE `good`.`id` = ".$aindex;
    
    if (!mysql_query($sql,$con)){
        die('Error: ' . mysql_error());
    }
    echo $num;
}

mysql_close($con);
?>

第4步：初始化页面数据加载

在页面加载时，遍历所有span元素，调用 senddata(i)

for(var i = 1; i < span.length + 1; i++){
  senddata(i);  
}

完成判断

部署完成后，打开网页应看到点赞数从数据库加载。点击“点赞”按钮，数字应即时+1。再次点击相同按钮，应弹出提示“你已经点过赞咯！”。清除浏览器Cookie后，可重新点赞。

简要总结

以上便是基于PHP、MySQL和原生Ajax实现点赞功能的详细内容。该实例展示了传统前后端交互的基础模式，重点在于Cookie的状态管理和XmlHttpRequest的数据传递。更多关于PHP数据库交互的技术资料请关注本站其它相关文章！