jQuery留言板案例

以下是一个基于jQuery实现的留言板案例：

HTML结构：

<div class="message-board">
  <h2>留言板</h2>
  <form>
    <div>
      <label for="name">姓名：</label>
      <input type="text" id="name" name="name">
    </div>
    <div>
      <label for="email">邮箱：</label>
      <input type="email" id="email" name="email">
    </div>
    <div>
      <label for="message">留言：</label>
      <textarea id="message" name="message"></textarea>
    </div>
    <button type="submit">提交</button>
  </form>
  <ul class="message-list"></ul>
</div>

CSS样式：

.message-board form div {
  margin-bottom: 10px;
}

.message-board label {
  display: inline-block;
  width: 60px;
}

.message-board textarea {
  width: 100%;
  height: 120px;
}

.message-board .message-list li {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ddd;
}

.message-board .message-list li .meta {
  color: #888;
  font-size: 12px;
  margin-bottom: 5px;
}

jQuery代码：

$(function() {
  // 表单提交事件
  $('form').submit(function(event) {
    event.preventDefault(); // 阻止表单默认提交行为

    // 获取表单数据
    var name = $('#name').val(),
        email = $('#email').val(),
        message = $('#message').val(),
        date = new Date();

    // 构造留言数据
    var data = {
      name: name,
      email: email,
      message: message,
      date: date
    };

    // 发送POST请求
    $.post('message.php', data, function(result) {
      // 清空表单
      $('form')[0].reset();

      // 添加新留言到列表
      var li = $('<li>').appendTo('.message-list');
      $('<div>').addClass('meta').text(data.name + ' 于 ' + date.toLocaleString() + ' 发表').appendTo(li);
      $('<div>').addClass('message').text(data.message).appendTo(li);
    });
  });

  // 页面首次加载时获取所有留言并添加到列表
  $.get('message.php', function(result) {
    $.each(result, function(index, data) {
      var li = $('<li>').appendTo('.message-list');
      $('<div>').addClass('meta').text(data.name + ' 于 ' + new Date(data.date).toLocaleString() + ' 发表').appendTo(li);
      $('<div>').addClass('message').text(data.message).appendTo(li);
    });
  });
});

PHP代码（message.php）：

<?php
// 连接数据库
$pdo = new PDO('mysql:host=localhost;dbname=messages', 'username', 'password');

// 设置返回JSON格式
header('Content-Type: application/json');

// 获取所有留言
$stmt = $pdo->query('SELECT * FROM messages');
echo json_encode($stmt->fetchAll(PDO::FETCH_ASSOC));

// 添加新留言
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
  $stmt = $pdo->prepare('INSERT INTO messages (name, email, message, date) VALUES (?, ?, ?, ?)');
  $stmt->execute(array($_POST['name'], $_POST['email'], $_POST['message'], $_POST['date']));
  echo json_encode(array('success' => true));
}

以上代码实现了一个简单的留言板功能，用户可以填写姓名、邮箱和留言内容，提交后会将留言存储到MySQL数据库中，同时页面会实时显示所有留言列表。其中，jQuery负责处理表单提交、获取和显示留言列表，PHP负责处理数据存储和获取。