如何将变量和数据从PHP传递到JavaScript？

47 浏览
0 Comments

如何将变量和数据从PHP传递到JavaScript？

想要改善此贴文？提供详细的回答，包括引用和解释你的答案正确的原因。对于没有足够细节的答案，可能会被编辑或删除。

我有一个PHP变量，我需要在我的JavaScript代码中使用它的值。我如何从PHP获取变量到JavaScript？

我有如下代码：

admin 更改状态以发布 2023年5月23日
0

2 答案

0 Comments

我通常在HTML中使用data-*属性。

这个例子使用了jQuery，但它可以适应其他库或vanilla JavaScript。

你可以在这里阅读更多有关dataset属性的信息：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset

0
0 Comments

实际上，有多种方法可以做到这一点。一些方法比其他方法需要更多的开销，有些方法被认为比其他方法更好。

按照任意顺序：

  1. 使用 AJAX 从服务器获取所需的数据。
  2. 将数据回显到页面的某个位置，并使用 JavaScript 从 DOM 获取信息。
  3. 直接向 JavaScript 回显数据。

在本文中，我们将逐一检查上述方法，了解各自的优缺点以及如何实现它们。

1. 使用 AJAX 从服务器获取所需的数据

这种方法被认为是最好的，因为您的服务器端和客户端脚本是完全独立的。

优点

  • 层之间的分离更好 - 如果明天您不再使用 PHP，并想要转移到 Servlet、REST API 或其他服务，您不必改变太多的 JavaScript 代码。
  • 更易读 - JavaScript 是 JavaScript，PHP 是 PHP。不混合这两种语言，您将获得更易读的代码。
  • 允许异步数据传输 - 从 PHP 获取信息可能耗费时间/资源。有时候，您只是不想等待信息、加载页面，并且信息随时到达。
  • 数据不直接在标记上找到 - 这意味着您的标记保持干净，不包含任何额外的数据，只有 JavaScript 看到它。

缺点

  • 延迟 - AJAX 创建一个 HTTP 请求，而 HTTP 请求通过网络传输并具有网络延迟。
  • 状态 - 通过单独的 HTTP 请求获取的数据不包括从获取 HTML 文档的 HTTP 请求中获取的任何信息。您可能需要此信息（例如，如果 HTML 文档是响应表单提交生成的），如果确实需要，则必须以某种方式传输它。如果您已经排除在页面中嵌入数据（如果您使用此技术），那么这限制了您使用 cookie/会话，可能会受到竞争条件的限制。

实现示例

使用 AJAX，您需要两个页面，其中一个是 PHP 生成输出的页面，第二个是 JavaScript 获取该输出的页面：

get-data.php

/* Do some operation here, like talk to the database, the file-session
 * The world beyond, limbo, the city of shimmers, and Canada.
 *
 * AJAX generally uses strings, but you can output JSON, HTML and XML as well.
 * It all depends on the Content-type header that you send with your AJAX
 * request. */
echo json_encode(42); // In the end, you need to `echo` the result.
                      // All data should be `json_encode`-d.
                      // You can `json_encode` any value in PHP, arrays, strings,
                      // even objects.

index.php（或者实际页面命名）

使用这两个文件的组合将在文件完成加载时警示42。

更多阅读材料

2. 将数据输出到页面，然后使用JavaScript从DOM中获取信息

这种方法不如AJAX优先，但它仍然有其优势。从某种意义上说，PHP和JavaScript之间仍然相对分离，因为JavaScript中没有直接使用PHP。

。

优点

  • 快速 - DOM操作通常很快，您可以相对快速地存储和访问大量数据。

缺点

  • 可能不符合语义标记 - 通常，您使用某种 来存储信息，因为从inputNode.value 中获取信息容易，但这样做意味着您的HTML中有一个无意义的元素。HTML有关于文档的数据 元素，HTML5引入了 data- * 属性，用于具有特定元素相关的JavaScript读取的数据。
  • 污染了源代码 - PHP生成的数据输出到HTML源代码中，这意味着您的HTML源代码变得更大且关注点不够清晰。
  • 难以获取结构化数据 - 结构化数据必须是有效的HTML，否则您将不得不自己转义和转换字符串。
  • 将PHP与数据逻辑紧密耦合 - 因为PHP用于呈现，所以无法将两者完全分离。

实现示例

使用这种方法，想法是创建某种元素，该元素不会显示给用户，但对JavaScript可见。

index.php

3. 直接将数据输出到JavaScript

这可能是最易理解的方法。

优点

  • 实现非常容易 - 实现过程非常简单，易于理解。
  • 不会污染源代码 - 变量直接输出到JavaScript，不会影响DOM。

缺点

  • 将PHP与数据逻辑紧密结合 - 因为在呈现中使用了PHP，所以无法干净地将两者分开。

实现示例

实现过程相对简单：

祝你好运！

0