Created
February 17, 2021 19:28
-
-
Save daveh/56fd2fa7801dbfb457f9fe626bfefc48 to your computer and use it in GitHub Desktop.
Passing data from PHP to JavaScript: methods, their pros and cons, and how to implement them (code to accompany https://youtu.be/u4HmQjLvNe8)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| $name = "David \"Dave\" O'Connor"; | |
| header('Content-Type: application/json'); | |
| echo json_encode($name); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| $name = "David \"Dave\" O'Connor"; | |
| ?><!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>PHP Data in JavaScript</title> | |
| <link rel="icon" href="data:;base64,iVBORw0KGgo="> | |
| <meta name="name" content="<?= htmlspecialchars($name) ?>"> | |
| </head> | |
| <body> | |
| <h1 data-name="<?= htmlspecialchars($name) ?>">Demo</h1> | |
| <input type="hidden" id="name" value="<?= htmlspecialchars($name) ?>"> | |
| <script> | |
| //var name = document.querySelector('input[type="hidden"').value; | |
| //var name = document.querySelector('meta[name="name"]').content; | |
| var name = document.querySelector('h1').dataset.name; | |
| alert('Hello ' + name); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| $name = "David \"Dave\" O'Connor"; | |
| ?> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>PHP Data in JavaScript</title> | |
| <link rel="icon" href="data:;base64,iVBORw0KGgo="> | |
| </head> | |
| <body> | |
| <h1>Demo</h1> | |
| <script> | |
| var name = <?= json_encode($name) ?>; | |
| alert('Hello ' + name); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>PHP Data in JavaScript</title> | |
| <link rel="icon" href="data:;base64,iVBORw0KGgo="> | |
| </head> | |
| <body> | |
| <h1>Demo</h1> | |
| <script> | |
| fetch('data.php') | |
| .then(function(response){ | |
| return response.json(); | |
| }) | |
| .then(function(data){ | |
| alert('Hello ' + data); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is very informative, thank you for sharing your knowledge.