CreateJS和PHP进行通信

CreateJS 是一个用于开发 HTML5 游戏和交互式应用程序的 JavaScript 库，它主要用于在客户端浏览器中运行。而 PHP 是一种服务器端语言，主要用于处理服务器上的数据和业务逻辑。

虽然 CreateJS 本身不能直接连接到 PHP（因为它在客户端运行），但可以使用 JavaScript 和 PHP 进行通信。一种常见的方法是使用 Ajax 技术，通过 JavaScript 发送异步请求到服务器上运行的 PHP 文件，并从服务器返回数据给 JavaScript。这样可以在 CreateJS 应用程序中使用 PHP 的功能来动态加载数据、保存数据或进行其他与服务器相关的操作。

总结来说，CreateJS 与 PHP 可以通过 JavaScript 和 Ajax 进行通信，以实现在客户端浏览器与服务器之间的数据传输和交互。

以下是一个示例，演示了如何使用CreateJS和PHP进行客户端浏览器与服务器之间的数据传输和交互。

一、CreateJS 向 PHP 发送数据

以下是一个示例，演示了如何在CreateJS中使用JavaScript和Ajax与PHP进行通信。在这个示例中，我们将在客户端浏览器中通过CreateJS发送数据到服务器，并使用PHP接收并处理这些数据。

首先，创建一个名为index.html的HTML文件，并将以下代码复制粘贴到文件中：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CreateJS and PHP Communication</title>
</head>

<body>
  <h1>CreateJS and PHP Communication</h1>

  <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
  <script src="main.js"></script>
</body>

</html>

接下来，在同一目录下创建一个名为main.js的JavaScript文件，并将以下代码复制粘贴到文件中：

// 创建一个舞台(stage)
var stage = new createjs.Stage("canvas");

// 创建一个文本对象(text)，用于显示返回的数据
var text = new createjs.Text("", "20px Arial", "#000");
text.x = 10;
text.y = 50;
stage.addChild(text);
stage.update();

// 创建一个发送按钮并添加点击事件监听器
var button = new createjs.Shape();
button.graphics.beginFill("#ff0000").drawRect(0, 0, 100, 40);
button.x = 10;
button.y = 10;
stage.addChild(button);
stage.update();

button.addEventListener("click", sendData);

// 发送数据函数
function sendData() {
  var data = { message: "Hello from client!" };

  // 创建Ajax请求
  var request = new XMLHttpRequest();
  request.open("POST", "server.php", true);
  request.setRequestHeader("Content-Type", "application/json");

  request.onreadystatechange = function () {
    if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
      var response = JSON.parse(request.responseText);

      // 更新文本对象的内容为返回的数据
      text.text = "Server response: " + response.message;
      stage.update();
    }
  };

  // 将数据转换为JSON字符串并发送
  request.send(JSON.stringify(data));
}

然后，在同一目录下创建一个名为server.php的PHP文件，并将以下代码复制粘贴到文件中：

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $data = json_decode(file_get_contents('php://input'), true);

    // 处理接收到的数据
    $messageFromClient = isset($data['message']) ? $data['message'] : '';
    $response = array('message' => 'Received message: '.$messageFromClient);

    // 将处理结果返回给客户端
    echo json_encode($response);
}
?>

最后，将上述三个文件放置在服务器环境中（如XAMPP或WAMP），通过浏览器打开index.html文件。

当您单击按钮时，CreateJS将通过JavaScript和Ajax发送包含消息的数据到服务器。服务器(PHP)接收到数据后，会进行简单处理，并将结果作为JSON响应返回给客户端。然后，CreateJS将在舞台上显示服务器的响应消息。

请注意，此示例仅演示了如何通过CreateJS与PHP进行通信，并在客户端浏览器向服务器发送数据。您可以根据自己的需求扩展和调整代码。

二、CreateJS 获取 PHP 数据

1. HTML 文件

首先创建一个名为 index.html 的 HTML 文件，并将其代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>CreateJS & PHP AJAX 示例</title>
</head>
<body>
    <h1>CreateJS & PHP AJAX 示例</h1>

    <!-- 创建一个画布用于绘制 -->
    <canvas id="myCanvas" width="400" height="300"></canvas>

    <!-- 引入CreateJS库和自定义JavaScript文件 -->
    <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

2. JavaScript 文件

然后创建一个名为 script.js 的 JavaScript 文件，用于编写客户端浏览器端的代码。这里我们使用CreateJS的 Stage 和 Shape 类来创建画布和图形。

window.addEventListener('load', init);

function init() {
    var canvas = document.getElementById('myCanvas');
    var stage = new createjs.Stage(canvas);

    // 创建一个形状并添加到舞台上
    var shape = new createjs.Shape();
    stage.addChild(shape);

    // 发送Ajax请求以获取服务器上的数据
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'getData.php', true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var data = JSON.parse(xhr.responseText);
            
            // 使用服务器返回的数据更新图形
            shape.graphics.beginFill(data.color).drawRect(0, 0, data.width, data.height);
            
            // 更新舞台显示
            stage.update();
        }
    };
    xhr.send();
}

3. PHP 文件

最后，创建一个名为 getData.php 的 PHP 文件，用于处理从客户端发送的 Ajax 请求，并返回相应的数据。

<?php
// 模拟从服务器获取数据
$data = array(
    'color' => '#FF0000',
    'width' => 200,
    'height' => 150,
);

// 将数据转换为JSON格式并返回给客户端
header('Content-Type: application/json');
echo json_encode($data);
?>

将上述三个文件保存在同一个目录下，并通过Web服务器打开 index.html 文件。当页面加载完成时，客户端会发送Ajax请求到服务器上的 getData.php 文件，并获取到返回的 JSON 数据。然后使用这些数据在画布上绘制一个矩形。

请注意，这个示例只是一个简单的演示，实际项目中可能需要更复杂的逻辑和安全措施。

posted @   多见多闻  阅读(47)  评论(0)  编辑  收藏  举报
（评论功能已被禁用）
相关博文：
· Adobe Animate Createjs H5
· 使用Animate和CreateJS设计H5页面
· HTML、JS与PHP之间的数据传输
· PHP-Ajax-秘籍（全）
· AJAX的一个简单实现
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
历史上的今天：
2022-06-29 SQLiteHelper类
点击右上角即可分享
微信分享提示