下面是一个简单的Ajax留言本的示例源码：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>Ajax留言本</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Ajax留言本</h1>
<form id="messageForm">
<input type="text" id="name" placeholder="姓名" required>
<textarea id="message" placeholder="留言" required></textarea>
<button type="submit">提交</button>
</form>
<div id="messageList"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>CSS代码（style.css）：
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
}
form {
text-align: center;
margin-bottom: 20px;
}
input, textarea {
display: block;
margin: 10px auto;
width: 300px;
padding: 5px;
}
button {
display: block;
margin: 10px auto;
padding: 5px 10px;
}
#messageList {
max-width: 500px;
margin: 0 auto;
padding: 10px;
border: 1px solid #ddd;
}JavaScript代码（script.js）：
$(document).ready(function() {
// 提交留言表单
$('#messageForm').submit(function(event) {
event.preventDefault(); // 阻止默认提交行为
// 获取表单数据
var name = $('#name').val();
var message = $('#message').val();
// 创建一个对象来存储留言数据
var data = {
name: name,
message: message
};
// 发送Ajax POST请求来保存留言
$.ajax({
type: 'POST',
url: 'save-message.php', // 替换成你的保存留言的后端处理脚本
data: data,
success: function(response) {
// 清除表单输入
$('#name').val('');
$('#message').val('');
// 刷新留言列表
loadMessages();
}
});
});
// 加载留言列表
function loadMessages() {
$.ajax({
type: 'GET',
url: 'get-messages.php', // 替换成你的获取留言的后端处理脚本
success: function(response) {
$('#messageList').html(response);
}
});
}
// 页面加载时加载留言列表
loadMessages();
});以上代码实现了一个基本的Ajax留言本功能。当用户提交留言表单时，会通过Ajax发送POST请求到后端保存留言。同时，页面会通过Ajax发送GET请求来获取留言列表，并将其显示在页面上。你需要替换代码中的后端处理脚本URL，使其指向你自己的后端逻辑。
以下是一个简单的Ajax留言本的源码：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>Ajax留言本</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>Ajax留言本</h1>
<form id="messageForm">
<textarea id="message" rows="4" cols="50"></textarea><br>
<input type="submit" value="发表留言">
</form>
<div id="messageList">
<!-- 这里显示留言列表 -->
</div>
<script>
$(document).ready(function() {
// 当表单被提交时
$("#messageForm").submit(function(event) {
// 阻止表单默认的提交行为
event.preventDefault();
// 获取用户输入的留言内容
var message = $("#message").val();
// 发送Ajax请求保存留言
$.ajax({
url: "saveMessage.php", // 这里填写保存留言的后端接口地址
method: "POST",
data: {
message: message
},
success: function(response) {
// 清空留言输入框
$("#message").val("");
// 更新留言列表
$("#messageList").append("<p>" + message + "</p>");
}
});
});
// 页面加载时加载留言列表
$.ajax({
url: "getMessages.php", // 这里填写获取留言列表的后端接口地址
method: "GET",
success: function(response) {
// 将获取的留言列表添加到页面上
$("#messageList").html(response);
}
});
});
</script>
</body>
</html>PHP代码（保存留言） – saveMessage.php：
<?php
// 连接数据库（根据自己的实际情况修改以下参数）
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";
$message = $_POST["message"];
// 创建数据库连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接是否成功
if ($conn->connect_error) {
die("数据库连接失败: " . $conn->connect_error);
}
// 构建插入留言的SQL语句
$sql = "INSERT INTO messages (message) VALUES ('$message')";
// 执行SQL语句
if ($conn->query($sql) === TRUE) {
echo "留言保存成功";
} else {
echo "保存留言时发生错误: " . $conn->error;
}
// 关闭数据库连接
$conn->close();
?>PHP代码（获取留言列表） – getMessages.php：
<?php
// 连接数据库（根据自己的实际情况修改以下参数）
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";
// 创建数据库连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接是否成功
if ($conn->connect_error) {
die("数据库连接失败: " . $conn->connect_error);
}
// 查询留言列表的SQL语句
$sql = "SELECT message FROM messages";
// 执行SQL查询
$result = $conn->query($sql);
// 构建留言列表的HTML
$messageList = "";
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$messageList .= "<p>" . $row["message"] . "</p>";
}
} else {
$messageList = "暂无留言";
}
// 返回留言列表的HTML
echo $messageList;
// 关闭数据库连接
$conn->close();
?>这段源码实现了一个简单的Ajax留言本功能，用户可以在留言输入框中输入留言内容，点击提交按钮后，使用Ajax将留言发送给后端保存，保存成功后更新留言列表部分显示最新的留言。页面加载时会从后端获取留言列表并显示在页面上。请根据自己的实际情况修改数据库连接参数和后端接口地址。
发布者：luotuoemo，转转请注明出处：https://www.jintuiyun.com/119611.html
