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

Вопрос: Как правильно использовать атрибуты data-* в HTML?

Ответ: Я обычно использую атрибуты data-* в HTML для хранения пользовательских данных. Вот пример:

<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');

            // Теперь переменная "service" содержит значение $myService->getValue();
        });
    });
</script>

В этом примере используется jQuery, но код можно адаптировать для других библиотек или для ванильного JavaScript.

Вы можете узнать больше о свойстве dataset здесь: MDN Web Docs.

Ваш код JavaScript с использованием PHP выглядит корректно. Тем не менее, обратите внимание на следующие требования для функции json_encode():

1. Убедитесь, что вы используете версию PHP 5.2.0 или выше, так как в более ранних версиях этой функции нет.
2. Переменная $PHPVar должна быть закодирована в UTF-8 или в формате Unicode. Если она содержит символы в другой кодировке, это может привести к ошибкам или некорректному выводу.

Если вы соблюдаете эти условия, код должен работать без проблем.

Для передачи значения переменной PHP в JavaScript можете использовать один из следующих способов:

Просто используйте один из следующих методов.

1. Первый вариант:

<script type="text/javascript">
var js_variable = '<?php echo $php_variable;?>';
</script>

2. Либо второй:

<script type="text/javascript">
    var js_variable = <?php echo json_encode($php_variable); ?>; 
</script>

Оба варианта позволят вам правильно передать значение переменной из PHP в JavaScript. Выбор метода зависит от того, нужно ли вам обрабатывать кавычки, пробелы и специальные символы в строковом значении. Второй вариант предпочтителен для работы с более сложными данными, так как функция json_encode корректно экранирует необходимые символы.

Попробуйте вот так:

<?php
    echo "<script> var x = " . json_encode($phpVariable) . "</script>";
?>

Однако, после длительных попыток выяснить, что этот способ хоть и работает, он может замедлить производительность. Дело в том, что PHP - это скрипт, выполняющийся на стороне сервера, тогда как JavaScript работает на стороне клиента.

Вот перевод вашего вопроса на русский в стиле ответа на StackOverflow.com:

Шаг 1: Преобразуйте данные в JSON

<?php

   $servername = "localhost";
   $username = "";
   $password = "";
   $dbname = "";
   $conn = new mysqli($servername, $username, $password, $dbname);

   if ($conn->connect_error) {
      die("Ошибка соединения: " . $conn->connect_error);
   } 

   $sql = "SELECT id, name, image FROM phone";
   $result = $conn->query($sql);

   while($row = $result->fetch_assoc()){ 
      $v[] = $row;    
   }

   echo json_encode($v);

   $conn->close();
?>

Шаг 2: Вызовите AJAX, чтобы получить файл JSON

function showUser(fnc) {
   var xhttp = new XMLHttpRequest();

   xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         // Шаг 3    
         var p = JSON.parse(this.responseText);
      }
   }

   xhttp.open("GET", "ваш_скрипт.php", true);
   xhttp.send();
}

Шаг 3: Преобразуйте JSON в объект JavaScript

Внутри функции onreadystatechange, после успешного получения данных, строка JSON.parse(this.responseText) превращает ответ в JavaScript-объект, который вы можете использовать непосредственно в вашем коде.

Теперь вы можете обращаться к данным из объекта p в дальнейшем, это даст вам возможность делать с ними всё, что вам нужно!

Если у вас есть дополнительные вопросы или нужна помощь с чем-то еще, не стесняйтесь спрашивать!