P粉4638111002023-08-28 10:40:20
我通常在 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。
您可以在此处阅读有关数据集属性的更多信息:https: //developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset
P粉5026087992023-08-28 00:24:11
实际上有几种方法可以做到这一点。有些需要比其他更多的开销,有些被认为比其他更好。
排名不分先后:
在这篇文章中,我们将研究上述每种方法,了解每种方法的优缺点,以及如何实现它们。
此方法被认为是最好的,因为您的服务器端和客户端脚本是完全分开的。
使用 AJAX,您需要两个页面,一个是 PHP 生成输出的页面,第二个是 JavaScript 获取该输出的页面:
/* 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.
<!-- snip --> <script> fetch("get-data.php") .then((response) => { if(!response.ok){ // Before parsing (i.e. decoding) the JSON data, // check for any errors. // In case of an error, throw. throw new Error("Something went wrong!"); } return response.json(); // Parse the JSON data. }) .then((data) => { // This is where you handle what to do with the response. alert(data); // Will alert: 42 }) .catch((error) => { // This is where you handle errors. }); </script> <!-- snip -->
以上两个文件的组合将在文件加载完成时发出警报 42
。
这种方法不如 AJAX 好,但它仍然有其优点。 PHP 和 JavaScript 之间仍然相对分开,从某种意义上说,JavaScript 中没有直接的 PHP。
来存储信息,因为获取信息更容易超出 inputNode.value
,但这样做意味着 HTML 中存在无意义的元素。 HTML 具有用于表示有关文档的数据的
元素,并且 HTML 5 引入了 data-*
属性,用于专门用于使用可与特定元素关联的 JavaScript 读取的数据。 这样,我们的想法是创建某种不会向用户显示但对 JavaScript 可见的元素。
<!-- snip --> <div id="dom-target" style="display: none;"> <?php $output = "42"; // Again, do some operation, get the output. echo htmlspecialchars($output); /* You have to escape because the result will not be valid HTML otherwise. */ ?> </div> <script> var div = document.getElementById("dom-target"); var myData = div.textContent; </script> <!-- snip -->
这可能是最容易理解的。
实现相对简单:
<!-- snip --> <script> var data = <?php echo json_encode("42", JSON_HEX_TAG); ?>; // Don't forget the extra semicolon! </script> <!-- snip -->
祝你好运!