Как передать переменные и данные из PHP в JavaScript?

Основные способы передачи данных из PHP в JavaScript

Вы правы — PHP работает на сервере, а JavaScript в браузере. Чтобы передать данные, нужно, чтобы PHP сгенерировал корректный JavaScript-код. Рассмотрим три надежных способа.

1. Передача простых строк и чисел (inline)

Для одиночных значений используйте json_encode(). Эта функция автоматически добавит кавычки для строк и правильно экранирует специальные символы:

<?php
$username = "Иван'Орлов"; // строка с кавычкой
$age = 25;
?>

<script>
    var username = <?php echo json_encode($username); ?>;
    var age = <?php echo json_encode($age); ?>;
    console.log(username); // "Иван'Орлов"
    console.log(age);      // 25
</script>

Почему это работает? json_encode() возвращает строку в формате JSON, которая является валидным JavaScript-кодом. Для строк это будет "Иван'Орлов" (с кавычками), для чисел — 25 (без кавычек).

2. Передача массивов и объектов (JSON)

Для сложных структур данных используйте тот же json_encode():

<?php
$user = [
    'name' => 'Иван',
    'age' => 25,
    'skills' => ['PHP', 'JavaScript', 'HTML']
];
?>

<script>
    // Передаём массив как JSON-объект
    var user = <?php echo json_encode($user); ?>;
    console.log(user.name);    // "Иван"
    console.log(user.skills);  // ["PHP","JavaScript","HTML"]
    
    // Или передаём как строку (если нужно для атрибута)
    var userString = '<?php echo json_encode($user); ?>';
    var userParsed = JSON.parse(userString);
</script>

3. Безопасная передача через data-атрибуты (рекомендуется)

Лучшая практика — не смешивать PHP и JS в одном файле. Используйте data-атрибуты HTML:

<!-- PHP генерирует HTML с данными -->
<div id="app" data-user='<?php echo json_encode($user); ?>'></div>

<!-- JavaScript читает данные -->
<script>
    var appDiv = document.getElementById('app');
    var user = JSON.parse(appDiv.dataset.user);
    console.log(user.name); // "Иван"
</script>

4. Динамическая передача через AJAX (для сложных сценариев)

Если данные меняются после загрузки страницы, используйте отдельный PHP-скрипт:

// frontend.js
fetch('/api/get-user.php?id=5')
    .then(response => response.json())
    .then(user => {
        console.log(user.name);
    });

// api/get-user.php
<?php
header('Content-Type: application/json');
$user = getUserFromDB($_GET['id']);
echo json_encode($user);
?>

Важные предостережения

• Никогда не используйте echo $var без json_encode() — это приводит к XSS-уязвимостям. Если в строке будет </script>, ваш код сломается.
• Для булевых значений json_encode(true) вернет true (JavaScript-логическое значение), а не строку.
• Для null json_encode(null) вернет null.
• Если данные большие (например, таблица из 1000 строк) — используйте AJAX, чтобы не раздувать HTML-страницу.

В итоге: для 90% случаев используйте json_encode() внутри тега <script> или data-атрибутов. Это безопасно, просто и поддерживает любые типы данных.

<?php $username = "Иван"; ?>
<input type="hidden" id="hidden-username" value="<?php echo htmlspecialchars($username, ENT_QUOTES, 'UTF-8'); ?>">

<script>
    var username = document.getElementById('hidden-username').value;
    alert(username); // "Иван"
</script>