-
-
Save raylouis/7292b9e9de603b72d9d4b27e0a2eca5b 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