How do I pass variables and data from PHP to JavaScript?

javascript

ajax

async-await

javascript-injection

byNikita Barsukov·Jan 14, 2025

To pass data from PHP to JavaScript, encode the PHP data as JSON using json_encode(), then echo it into a JavaScript variable.

<?php $my_data = ['name' => 'John', 'age' => 28]; ?>
<script>
var myData = <?= json_encode($my_data) ?>;
console.log(myData); // { "name": "John", "age": 28 }
</script>

This produces a JavaScript object myData by taking advantage of PHP's associative array $my_data.

Advanced techniques and security

While transferring data from PHP to JavaScript, it's crucial to consider security and efficiency.

Asynchronous data with AJAX

Leverage AJAX to avoid blocking the user interface. It fetches data from the server asynchronously, no need to mix data with your HTML markup, thereby keeping things neat.

Proper output escaping

Always escape your PHP output before injecting it into JavaScript to ward off XSS attacks. Use htmlspecialchars() or similar when dealing with user input. (Pro tip: Don't trust user input as much as you don't trust gas station sushi!)

HTML5 `data-*` attributes

HTML5 data-* attributes can be used to securely pass data. Store the PHP data in these attributes and retrieve them in JavaScript using the dataset property. It's great for small data pieces but don't try passing a thesis!

<div id="userinfo" data-name="John" data-age="28"></div>
<script>
let userElement = document.getElementById('userinfo');
let userName = userElement.dataset.name;
let userAge = userElement.dataset.age;
</script>

Handling content types with JSON encoding

Make sure to use correct content types (UTF-8) to avoid JSON malfunctioning with json_encode(). Incorrect content types can lead to malformed JSON and silent mode failures. No one likes silent failures.

Handling performance issues

Avoid heavy usage of cookies or excessive server requests. Stateless HTTP practices and minimal client requests after the page loaded significantly enhance the user experience.

Different escaping strategies

The context really matters when escaping. For JavaScript injection, handle quotes and line breaks. For data-* attributes, focus on HTML entity encoding.

Additional methods and considerations

Cleaner architecture with asynchronous calls

Fetch API or AJAX with promises or async/await keep your front-end and data-fetching logic separate. The JavaScript kitchen remains clean and the chef remains happy.