У меня есть переменная в PHP, и мне нужно получить ее значение в JavaScript. Как можно это сделать?
У меня есть код PHP, который выглядит так:
<?php
...
$val = $myService->getValue();
?>
И код JavaScript, который требует val и выглядит следующим образом:
<script>
myPlugin.start($val); // я пытаюсь получить ее здесь, но это не работает
<?php myPlugin.start($val); ?>// не работает
myPlugin.start(<?=$val?> // иногда работает, иногда нет
</script>
Ответ 1
Есть несколько подходов к этому. Одни требуют больше накладных расходов, а другие выполняются лучше прочих.
В произвольном порядке:
Используйте AJAX для получения необходимых данных с сервера.
Выведите данные куда-нибудь на страницу и используйте JavaScript для получения информации из DOM.
Выведите данные прямо в 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.
Плюсы:
Быстро – операции DOM часто бывают быстрыми, и вы можете относительно быстро хранить и получать доступ к большому количеству данных.
Минусы:
Потенциально неопределенная разметка. Обычно для хранения информации используется что-то вроде <input type=hidden>, потому что проще получить информацию из inputNode.value, но это означает, что у вас есть бессмысленный элемент в HTML. В HTML есть элемент <meta> для данных о документе, а в HTML5 появились атрибуты data-* для данных, специально предназначенных для чтения с помощью JavaScript, которые могут быть связаны с определенными элементами.
Загрязняет источник. Данные, которые генерирует PHP, выводятся непосредственно в HTML, что означает, что вы получаете большой HTML.
Труднее получить структурированные данные. Структурированные данные должны быть валидным HTML, иначе вам придется самостоятельно выводить и преобразовывать строки.
Тесная связь 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
