一个简单的评论功能示例，基于 jQuery 和 PHP

jQuery代码
来源：站三界导航
83阅读
2023-05-18

HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>评论</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div id="comment-list">
        <!-- 评论列表 -->
    </div>
    <form id="comment-form">
        <textarea name="content" placeholder="请输入您的评论"></textarea>
        <button type="submit">提交</button>
    </form>
    <script>
        // 加载评论列表
        $(function() {
            $.get('comment.php', function(result) {
                if (result.error) {
                    alert(result.error);
                } else {
                    $('#comment-list').html(result.html);
                }
            });
        });

        // 提交评论
        $('#comment-form').submit(function(event) {
            event.preventDefault();
            var data = $(this).serialize();
            $.post('comment.php', data, function(result) {
                if (result.error) {
                    alert(result.error);
                } else {
                    alert(result.msg);
                    $('#comment-list').prepend(result.html);
                }
            });
        });
    </script>
</body>
</html>

PHP 代码（comment.php）：

<?php

// 模拟数据库存储评论
$comments = [
    ['id' => 1, 'content' => '这是一条评论'],
    ['id' => 2, 'content' => '这是另一条评论'],
];

if ($_SERVER['REQUEST_METHOD'] == 'GET') {
    // 获取评论列表
    $html = '';
    foreach ($comments as $comment) {
        $html .= '<div>' . htmlspecialchars($comment['content']) . '</div>';
    }
    echo json_encode(['error' => null, 'html' => $html]);
} else {
    // 新增评论
    $content = $_POST['content'];
    if (empty($content)) {
        echo json_encode(['error' => '评论内容不能为空']);
    } else {
        $id = count($comments) + 1;
        $comments[] = ['id' => $id, 'content' => $content];
        $html = '<div>' . htmlspecialchars($content) . '</div>';
        echo json_encode(['error' => null, 'msg' => '评论成功', 'html' => $html]);
    }
}

这个示例实现了一个简单的评论功能，包括获取评论列表和新增评论两个操作。用户可以在页面中填写评论内容并提交，提交后会通过 AJAX 发送数据到后台的 comment.php 文件进行处理。

注意事项：

代码中使用了 jQuery 库来简化 AJAX 操作和 DOM 操作。
为了简化示例代码，评论数据存储在一个 PHP 数组中，并没有真正存储到数据库中。
为了防止 XSS 攻击，获取评论列表和新增评论时都对评论内容进行了 htmlspecialchars() 转义处理。
为了方便调试，代码中使用了 JSON 格式输出结果。在实际应用中可以根据需要进行修改。

本文来自投稿，不代表站三界导航立场，如若转载，请注明出处：https://www.zhansanjie.com/article/details/43204.html

1、本文系转载，版权归原作者所有，旨在传递信息，不代表看本站的观点和立场。

2、本站仅提供信息发布平台，不承担相关法律责任。

3、若侵犯您的版权或隐私，请联系本站管理员删除。

4、本文由会员转载自互联网，如果您是文章原创作者，请联系本站注明您的版权信息。

上一篇：旅行者和站三界导航

下一篇：男子当街砍人路人：有人耳朵被砍掉，一名女性的半边脸被砍裂！