js如何拿到php中的变量

当PHP向JS传输数据时，老实说要看情况。

1 .直接粘贴到 HTML 中（老式但速度很快） <?php $var = "来自 PHP 的问候！"; 回显“<脚本>”； 回显“const jsVar = '”。
添加斜杠($var)。
“'；”； 回声“</脚本>”； ?> 这会导致 PHP 将值直接插入到 JS 代码中。
添加斜杠用于防止特殊字符引起混淆。
这个方法有效吗？好的。
但前后端代码混在一起，长时间看眼睛会痛。
适合非常简单的事情，比如只发送“Hello”。

2 AJAX 请求（现已标准） 1 .在PHP中打开一个接口 <?php header('内容类型：application/json'); $data = ['key' => 'value', 'number' => 4 2 ]; 回显 json_encode($data); ?> 就是这么一个接口。
当浏览器访问它时，你会看到JSON数据。
您可以通过 Fetch API 或 Axios 等库获取它。
这是目前主流的做法。
前后端不混合，数据格式清晰，浏览器直接支持，开发效率高。

3 WebSocket（仅限实时） 1 . PHP使用Ratchet作为WebSocket服务器 <?php 使用 Ratchet\ConnectionInterface； 使用 Ratchet\MessageComponentInterface;
类 MyWebSocket 实现 MessageComponentInterface { 公共函数 onOpen(ConnectionInterface $conn) { $data = ['serverTime' => time(), 'status' => '已连接']; $conn->send(json_encode($data)); } // ...其他方法... } ?> 这个东西适合实时性要求高的应用，比如聊天室。
来自服务器的新消息可以主动推送到客户端。
但开发更加复杂，性能也必须跟上。

4 创建隐藏字段（老式但有用） <表单id =“数据表单”> <input type="hidden" id="phpData" value='<?php echo json_encode($data); ？>'> </形式> <脚本> const formData = JSON.parse(document.getElementById('phpData').value); </脚本> 这种方法是用PHP将数据转换为JSON，塞到输入中，然后用JS取出来。
适合页面需要刷新或者无法直接AJAX的场景。
但一定要注意安全，及时逃离。

安全提示：
要屏蔽输出，请使用specialchars()
使用JSON传输数据。
内容类型必须是 application/json
不要在前端直接泄露敏感数据
服务建议：
对于复杂数据使用 AJAX，不要将其塞入 HTML
对于频繁请求，您可以考虑添加缓存头或使用 LocalStorage 缓存。

选择哪种方法取决于您的需求：
实时性一定要高吗？ WebSockets
数据很复杂？阿贾克斯
简单的事情？直接粘贴 HTML
您想刷新页面吗？表单隐藏字段
说实话，现在最常用的是AJAX+JSON。
前后端区分清楚，代码看起来不错。

PHP 函数如何与 Elm 交互：构建健壮且可维护的前端应用

说实话，在学习这个之前我很困惑，但是一旦我研究了它，我意识到即使你数学不好，你也可以成为一名程序员。
上次我处理这个 Counter 示例时，我在 JS 桥中停留了最长的时间，后来在浏览器控制台中注意到 WebSocket 未连接。
我详细讲一下我遇到的坑。

1 .定义端口就像修理水管一样。
如果不拧紧，数据就会泄漏。
例如，在 Counter 应用程序中定义 sendIncrement 和 receiveCount 时，参数类型必须与 PHP 端匹配。
当时我用的是portreceiveCount:(Int->msg)->Submsg。
结果PHP在使用WebSocket接收字符串的时候直接崩溃了。
后来使用 TypeScript 编写的 JS 桥接代码解决了这个问题。
看看这个细节有多烦人。

2 JSON 交换就像翻译。
糟糕的翻译会破坏整个对话。
我有一个客户端项目，在使用 json_encode() 发送数据时，所有中文字符都被替换为无效字符。
检查了一段时间，发现我的PHP版本太老了，用7 .2 代替也正常。
在 Elm 端进行解析时也必须小心。
与这种编写map2 Response的方式类似，如果从PHP发送的计数为空，Elm将会崩溃。
经过3 个小时的调试，终于通过在responseDecoder前添加一个选项完成了。

3 WebSocket 就像养宠物一样。
如果你不好好照顾它，它就会生气。
我尝试使用带有计数器的轮询（每秒一个 AJAX 请求），但是当用户单击按钮两次时，请求重叠，计数器跳动了 3 次。
切换到 WebSockets 后情况好多了，但需要注意的是，在 PHP 端使用 Ratchet 库时，$from->send() 不能直接在 onMessage 函数中使用。
您需要添加延迟。
否则该事件将被触发两次。
我个人从未在这方面运行过 Node.js 版本，但我使用过 Java 版本。

4 安全应该像一个看门狗。
如果安全措施松懈，就会发生一些事情。
在一次测试中，我忘记验证 PHP 端的输入并直接发送 SQL 注入。
当 Elm 解析 JSON 时，堆栈爆炸了。
因此，每次发送数据之前，PHP都必须使用json_decode()完成转换，然后进行严格的类型检查。
在Elm方面，我们还需要添加andThen来处理异常。
因此，我们在一个竞争项目中更改了四个版本的解码器。

5 HTTP API 交互就像玩积木一样。
如果接口不匹配，则无法工作。
我有一个项目需要传输用户数据。
PHP端使用JWT认证，Elm端使用Http模块发出请求。
如果改变参数的顺序，认证将会失败。
后来我改用传递查询参数。
每当我调试的时候，我首先要使用Postman来测试接口。
如果数据格式不正确，就会出现4 01 错误。
对此，我们建议使用Swagger自动生成API文档，以避免自己编写JSON Schema时出现错误。

最有趣的是，稍后当您使用 WebSocket 时，PHP 服务器告诉 Elm 解析 JSON。
我们发现我们处理消息的速度比分析消息的速度慢。
所有计数器应用程序现在都使用 HTTP 长轮询。
虽然比WebSocket多需要3 个请求，但开发效率却高很多。
确实，从数据格式来看，JSON 比 XML 简单，但对于现在前后端分离的项目，我更喜欢使用 GraphQL。
Elm有elm-graphql，但是写解码器还是很头疼。
对于数据交换，我们建议从 WebSocket 开始，然后当您变得更加熟练时考虑 HTTP API。

PHP入门指南：前后端分离

前后端分离，提高开发效率，正确选择Laravel、Symfony、YII框架，清楚了解RESTful API、WebSocket、GraphQL通信方式，正确使用Postman、VSCode、ChromeDevTools工具。