Heim > Fragen und Antworten > Hauptteil
P粉8934570262023-08-22 09:30:13
我通常在HTML中使用data-*属性。
<div class="service-container" data-service="<?= htmlspecialchars($myService->getValue()) ?>" > </div> <script> $(document).ready(function() { $('.service-container').each(function() { var container = $(this); var service = container.data('service'); // Var "service" now contains the value of $myService->getValue(); }); }); </script>
这个例子使用了jQuery,但它可以适应其他库或原生JavaScript。
您可以在这里阅读有关dataset属性的更多信息:https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset
P粉5170907482023-08-22 09:17:08
实际上有几种方法可以做到这一点。有些方法需要更多的开销,有些方法被认为比其他方法更好。
没有特定的顺序:
在本文中,我们将详细介绍上述每种方法的优缺点,以及如何实现它们。
这种方法被认为是最好的,因为服务器端和客户端脚本完全分离。
使用AJAX,你需要两个页面,一个是PHP生成输出的页面,另一个是JavaScript获取该输出的页面:
/* 在这里执行一些操作,比如与数据库、文件会话等进行交互 * 超越世界,无间地带,闪烁之城和加拿大。 * * AJAX通常使用字符串,但你也可以输出JSON、HTML和XML。 * 这完全取决于你发送的AJAX请求的Content-type头。 */ echo json_encode(42); // 最后,你需要`echo`结果。 // 所有数据都应该使用`json_encode`。 // 你可以在PHP中`json_encode`任何值,数组、字符串, // 甚至对象。
<!-- 省略 --> <script> fetch("get-data.php") .then((response) => { if(!response.ok){ // 在解析(即解码)JSON数据之前, // 检查是否有任何错误。 // 如果有错误,抛出错误。 throw new Error("Something went wrong!"); } return response.json(); // 解析JSON数据。 }) .then((data) => { // 在这里处理响应。 alert(data); // 将弹出:42 }) .catch((error) => { // 在这里处理错误。 }); </script> <!-- 省略 -->
上述两个文件的组合将在文件加载完成时弹出42
。
这种方法不如AJAX可取,但它仍然有其优点。在某种程度上,它在PHP和JavaScript之间仍然是相对分离的,因为JavaScript中没有直接使用PHP。
<input type=hidden>
来存储信息,因为从inputNode.value
中获取信息更容易,但这样做意味着你的HTML中有一个无意义的元素。HTML有<meta>
元素用于文档的数据,HTML 5引入了data-*
属性,用于特定元素的与JavaScript相关的数据。在这种情况下,你需要创建某种元素,该元素对用户不可见,但对JavaScript可见。
<!-- 省略 --> <div id="dom-target" style="display: none;"> <?php $output = "42"; // 再次,执行一些操作,获取输出。 echo htmlspecialchars($output); /* 必须转义,否则结果 将不是有效的HTML。 */ ?> </div> <script> var div = document.getElementById("dom-target"); var myData = div.textContent; </script> <!-- 省略 -->
这可能是最容易理解的方法。