商丘阿里云代理商：Ajax留言本源码

下面是一个简单的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