结合AJAX进行PHP开发之入门

结合AJAX进行PHP开发之入门 的攻略如下：

1. AJAX 是什么？

首先来了解一下 AJAX。AJAX（Asynchronous JavaScript And XML）即异步 JavaScript 和 XML 的技术组合，能够异步处理网页，实现局部刷新，并无需刷新整个页面。AJAX 使用 XmlHttpRequest 对象来向服务器发送请求和接收响应。

2. 什么是 PHP ？

PHP 是一种流行的服务器端脚本语言，能够为动态网站生成动态 web 页面和 web 应用程序。PHP 的代码在服务器上执行，可以与数据库、文件系统以及其他服务器端的数据进行交互。

3. 如何结合 AJAX 和 PHP 进行开发？

先来一个小示例：实现在页面上点击按钮，向服务器发送请求并返回另一个字符串。

// HTML 文件

<!DOCTYPE html>
<html>
<head>
    <title>AJAX 和 PHP 的结合</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <button onclick="getMessage()">点击获取信息</button>
    <div id="msg"></div>
    <script>
        function getMessage() {
            $.ajax({
                url:"server.php",    // 发送请求的地址
                type:"post",    // 发送请求的方式
                data:{message:"Hello world!"},    // 发送的数据
                dataType:"text",    // 接收的数据类型
                success:function(result) {    // 成功的回调
                    $("#msg").html(result);    // 在页面上显示返回的字符串
                },
                error:function(error) {    // 失败的回调
                    alert("获取信息失败。");
                }
            });
        }
    </script>
</body>
</html>

// PHP 文件

<?php
    // 从 POST 请求中获取数据
    $msg = $_POST['message'];
    // 返回一个字符串
    echo "您发送的信息是：" . $msg;
?>

解释一下代码：

在 HTML 文件中，点击按钮会调用 getMessage() 函数，该函数会发起一个 AJAX 请求，向服务器发送数据，获取返回的字符串，并在 #msg 元素上显示该字符串。
在 PHP 文件中，从 POST 请求获取数据，返回一个字符串，在该示例中只是简单地返回了一个信息。

4. AJAX 和 PHP 的开发示例

接下来再来一个简单的示例，实现一个留言板，实时刷新新的留言，并将留言内容存储在数据库中。

// HTML 文件

<!DOCTYPE html>
<html>
<head>
    <title>AJAX 和 PHP 的结合</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <h1>留言板</h1>
    <div>
        <input type="text" id="username" placeholder="请输入您的昵称">
        <br><br>
        <textarea id="content" placeholder="请输入留言内容"></textarea>
        <br><br>
        <button onclick="addMessage()">提交留言</button>
    </div>
    <div id="messageList">
        <!-- 消息列表 -->
    </div>
    <script>
        // 获取已有留言和实时更新留言列表
        function getMessage() {
            $.ajax({
                url:"getMessage.php",
                type:"get",
                dataType:"json",
                success:function(result) {
                    var html = "";
                    for (var i = 0; i < result.length; i++) {
                        html += "<div><b>" + result[i].username + ":</b> " + result[i].content + "</div>";
                    }
                    $("#messageList").html(html);
                    setTimeout(getMessage, 1000); // 每隔 1 秒更新一次留言列表
                },
                error:function(error) {
                    alert("获取留言失败。");
                }
            });
        }
        getMessage();

        // 添加留言
        function addMessage() {
            var username = $("#username").val();
            var content = $("#content").val();
            if (username === "" || content === "") {
                alert("昵称和内容不能为空。");
                return;
            }
            $.ajax({
                url:"addMessage.php",
                type:"post",
                data:{username:username, content:content},
                dataType:"json",
                success:function(result) {
                    if (result.status === true) {
                        $("#username").val("");
                        $("#content").val("");
                    } else {
                        alert("添加留言失败。");
                    }
                },
                error:function(error) {
                    alert("添加留言失败。");
                }
            });
        }
    </script>
</body>
</html>

// getMessage.php 文件

<?php
    // 连接数据库
    $dbHost = "localhost";
    $dbName = "test";
    $dbUsername = "root";
    $dbPassword = "";
    $conn = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
    if ($conn->connect_error) {
        die("连接数据库失败。" . $conn->connect_error);
    }

    // 查询留言列表并返回
    $sql = "SELECT username, content FROM messages ORDER BY id DESC";
    $result = $conn->query($sql);
    $messages = array();
    if ($result->num_rows > 0) {
        while ($row = $result->fetch_assoc()) {
            $message = array("username" => $row["username"], "content" => $row["content"]);
            array_push($messages, $message);
        }
    }
    header("Content-type:application/json");
    echo json_encode($messages);    // 返回留言列表
?>

// addMessage.php 文件

<?php
    // 从 POST 请求中获取数据
    $username = $_POST["username"];
    $content = $_POST["content"];
    if ($username === "" || $content === "") {
        header("Content-type:application/json");
        echo 'false';
        exit;
    }

    // 连接数据库
    $dbHost = "localhost";
    $dbName = "test";
    $dbUsername = "root";
    $dbPassword = "";
    $conn = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
    if ($conn->connect_error) {
        die("连接数据库失败。" . $conn->connect_error);
    }

    // 插入留言
    $sql = "INSERT INTO messages (username, content) VALUES ('$username', '$content')";
    if ($conn->query($sql) === true) {
        header("Content-type:application/json");
        echo 'true';
    } else {
        header("Content-type:application/json");
        echo 'false';
    }

    // 关闭数据库连接
    $conn->close();
?>

解释一下代码：

在 HTML 文件中，通过 AJAX 技术实现了实时更新留言列表和添加留言的功能。
在 getMessage.php 文件中，从数据库中查询留言列表，并将查询结果格式化成 JSON 数据返回。
在 addMessage.php 文件中，从表单中获取用户信息，并将其插入到数据库中。插入成功后，返回一个 true，否则返回 false。

以上是使用 AJAX 和 PHP 开发留言板的一个简单示例。开发 AJAX 和 PHP 应用需要熟练掌握前端的 HTML、CSS、JavaScript 技能，以及后端的 PHP、MySQL 技能。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：结合AJAX进行PHP开发之入门 - Python技术站

结合AJAX进行PHP开发之入门

1. AJAX 是什么？

2. 什么是 PHP ？

3. 如何结合 AJAX 和 PHP 进行开发？

4. AJAX 和 PHP 的开发示例

相关文章