Web

Передача переменных и данных из PHP в JavaScript

У меня есть переменная в PHP, и мне нужно получить ее значение в JavaScript. Как можно это сделать?

У меня есть код PHP, который выглядит так:

<?php

     ...

     $val = $myService->getValue();

?>

 

 

И код JavaScript, который требует val и выглядит следующим образом:

 

<script>

    myPlugin.start($val);         // я пытаюсь получить ее здесь, но это не работает

    <?php myPlugin.start($val); ?>// не работает

    myPlugin.start(<?=$val?>      // иногда работает, иногда нет

</script>

 

Ответ 1

Есть несколько подходов к этому. Одни требуют больше накладных расходов, а другие выполняются лучше прочих.

В произвольном порядке:

  1. Используйте AJAX для получения необходимых данных с сервера.

  2. Выведите данные куда-нибудь на страницу и используйте JavaScript для получения информации из DOM.

  3. Выведите данные прямо в JavaScript.

Мы рассмотрим каждый из вышеперечисленных методов и увидим плюсы и минусы каждого, а также способы их реализации.

 

Используйте AJAX для получения необходимых данных с сервера.

Этот метод считается лучшим, потому что ваши серверные и клиентские скрипты полностью разделены.

Плюсы:

  • Лучшее разделение между слоями. Если вы перестанете использовать PHP и захотите перейти к сервлету, REST API или какой-либо другой службе, вам не придется менять большую часть кода JavaScript.

  • Более читабельный. JavaScript это JavaScript, PHP это PHP. Не смешивая их, вы получаете более читаемый код на обоих языках.

  • Обеспечивает асинхронную передачу данных получение информации из PHP может потребовать больших затрат времени и ресурсов. Иногда вы просто не захотите ждать информацию, загружать страницу и получать к ней доступ.

  • Данные не находятся непосредственно в разметке это означает, что ваша разметка очищена от любых дополнительных данных и только JavaScript видит их.

Минусы:

  • Задержка  AJAX создает HTTP-запрос, а HTTP-запросы передаются по сети и имеют сетевые задержки.

  • Состояние  данные, полученные с помощью отдельного HTTP-запроса, не будут включать никакой информации из HTTP-запроса, по которому был получен HTML-документ. Вам может понадобиться эта информация (например, если HTML-документ создается в ответ на отправку формы), и, если вы это сделаете, вам придется каким-то образом передать ее. Если вы исключили встраивание данных на страницу (которая у вас есть, если вы используете этот метод), это ограничивает вас файлами cookie/sessions, которые могут быть предметом конкуренции.

 

Пример реализации

С AJAX вам нужны две страницы, одна из которых - это то, где PHP генерирует вывод, а вторая - где JavaScript получает его:

get-data.php

echo json_encode(42); 

index.php

<script>

    function reqListener () {

      console.log(this.responseText);

    }

    var oReq = new XMLHttpRequest(); // требуемый объект

    oReq.onload = function() {

        // Здесь вы определяете, что делать с ответом.

        // Фактические данные находятся в this.responseText

        alert(this.responseText);

    };

    oReq.open("get", "get-data.php", true);

    oReq.send();

</script>

 

Вышеупомянутая комбинация двух файлов отобразит предупреждение «42», когда файл завершит загрузку.

 

Выведите данные куда-нибудь на страницу и используйте JavaScript для получения информации из DOM.

Этот метод менее предпочтителен по сравнению с AJAX, но все же имеет свои преимущества. Он по-прежнему использует разделение между PHP и JavaScript.

Плюсы:

  1. Быстро операции DOM часто бывают быстрыми, и вы можете относительно быстро хранить и получать доступ к большому количеству данных.

Минусы:

  1. Потенциально неопределенная разметка. Обычно для хранения информации используется что-то вроде <input type=hidden>, потому что проще получить информацию из inputNode.value, но это означает, что у вас есть бессмысленный элемент в HTML. В HTML есть элемент <meta> для данных о документе, а в HTML5 появились атрибуты data-* для данных, специально предназначенных для чтения с помощью JavaScript, которые могут быть связаны с определенными элементами.

  2. Загрязняет источник. Данные, которые генерирует PHP, выводятся непосредственно в HTML, что означает, что вы получаете большой HTML.

  3. Труднее получить структурированные данные. Структурированные данные должны быть валидным HTML, иначе вам придется самостоятельно выводить и преобразовывать строки.

  4. Тесная связь PHP с логикой данных. Поскольку PHP используется в представлении, вы не можете разделить эти два понятия.

 

Пример реализации

Идея состоит в том, чтобы создать какой-то элемент, который не будет отображаться на странице, но будет виден JavaScript.

index.php

<div id="dom-target" style="display: none;">

    <?php

        $output = "42"; // результат операции для вывода

        echo htmlspecialchars($output); // необходимо экранировать,  т.к. результат не будет корректным в HTML

    ?>

</div>

<script>

    var div = document.getElementById("dom-target");

    var myData = div.textContent;

</script>

 

Выведите данные прямо в JavaScript.

Это, наверное, самый простой способ.

Плюсы:

  • Очень легко реализуется требуется совсем немного времени для реализации.

  • Не загрязняет исходный код  переменные выводятся непосредственно в JavaScript, поэтому DOM не затрагивается.

Минусы:

  • Тесно связывает PHP с вашей логикой данных  поскольку PHP используется в представлении и вы не можете разделить их.

 

Пример реализации

Реализация относительно проста:

<script>

    var data = <?php echo json_encode("42", JSON_HEX_TAG); ?>;

 </script>

 

Ответ 2

Я обычно использую атрибуты data- * в HTML.

<div class="service-container" data-service="<?php echo $myService->getValue(); ?>">

</div>

<script>

    $(document).ready(function() {

        $('.service-container').each(function() {

            var container = $(this);

            var service = container.data('service');

        });

    });

</script>

 

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

 

Ответ 3

Воспользуйтесь одним из следующих способов:

<script type="text/javascript">

var js_variable  = '<?php echo $php_variable;?>';

<script>

 

Или

 

<script type="text/javascript">

    var js_variable = <?php echo json_encode($php_variable); ?>; 

</script>

Схожие статьи

Web

Как преобразовать объект в массив

Web

Может ли PHP, используя cURL, получить заголовки и тело ответа за один запрос

Web

Отношения Laravel: попытка получить "описание" свойства не-объекта

Web

Когда использовать константу PHP «PHP_EOL»