php使用ajax实现点赞

2026-01-29 07:01:03PHP

实现步骤

前端部分（HTML + JavaScript）

创建点赞按钮和显示点赞数的元素：

<button id="like-btn">点赞</button>
<span id="like-count">0</span>

使用jQuery处理AJAX请求：

$(document).ready(function() {
    $('#like-btn').click(function() {
        $.ajax({
            url: 'like.php',
            type: 'POST',
            data: { action: 'like' },
            success: function(response) {
                $('#like-count').text(response.likes);
            }
        });
    });
});

后端部分（PHP）

创建like.php处理点赞请求：

<?php
header('Content-Type: application/json');

// 模拟数据库存储点赞数
session_start();
if (!isset($_SESSION['likes'])) {
    $_SESSION['likes'] = 0;
}

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
    if ($_POST['action'] === 'like') {
        $_SESSION['likes']++;
        echo json_encode(['likes' => $_SESSION['likes']]);
        exit;
    }
}

echo json_encode(['likes' => $_SESSION['likes']]);
?>

数据库集成

修改like.php使用MySQL数据库：

<?php
header('Content-Type: application/json');

$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
    if ($_POST['action'] === 'like') {
        $sql = "UPDATE likes SET count = count + 1 WHERE id = 1";
        $conn->query($sql);
    }
}

$result = $conn->query("SELECT count FROM likes WHERE id = 1");
$row = $result->fetch_assoc();
echo json_encode(['likes' => $row['count']]);

$conn->close();
?>

防止重复点赞

在前端添加禁用按钮逻辑：

$('#like-btn').click(function() {
    $(this).prop('disabled', true);
    $.ajax({
        // ...原有AJAX代码...
    });
});

完整实现方案

创建数据库表：

CREATE TABLE likes (
 id INT PRIMARY KEY,
 count INT DEFAULT 0
);
INSERT INTO likes (id, count) VALUES (1, 0);

完整PHP代码：


<?php
header('Content-Type: application/json');

$conn = new mysqli("localhost", "username", "password", "myDB");

if ($_SERVER['REQUEST_METHOD'] === 'POST') { if (isset($_POST['action']) && $_POST['action'] === 'like') { $stmt = $conn->prepare("UPDATE likes SET count = count + 1 WHERE id = 1"); $stmt->execute(); } }

$stmt = $conn->prepare("SELECT count FROM likes WHERE id = 1"); $stmt->execute(); $result = $stmt->get_result(); $data = $result->fetch_assoc();

echo json_encode(['likes' => $data['count']]); $conn->close(); ?>


3. 完整前端代码：
```html
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<button id="like-btn">点赞</button>
<span id="like-count">0</span>

<script>
$(function() {
    // 初始加载点赞数
    $.get('like.php', function(data) {
        $('#like-count').text(data.likes);
    });

    $('#like-btn').click(function() {
        $(this).prop('disabled', true);
        $.ajax({
            url: 'like.php',
            type: 'POST',
            data: { action: 'like' },
            success: function(data) {
                $('#like-count').text(data.likes);
            }
        });
    });
});
</script>

php使用ajax实现点赞