Передача переменных и данных из PHP в JavaScript
У меня есть переменная в PHP, и мне нужно получить ее значение в JavaScript. Как можно это сделать?
У меня есть код PHP, который выглядит так:
.
$val = $myService->getValue();
?>
И код JavaScript, который требует val и выглядит следующим образом:
myPlugin.start($val); // я пытаюсь получить ее здесь, но это не работает
// не работает
myPlugin.start( // иногда работает, иногда нет
Ответ 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
index.php
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();
Вышеупомянутая комбинация двух файлов отобразит предупреждение «42», когда файл завершит загрузку.
Выведите данные куда-нибудь на страницу и используйте JavaScript для получения информации из DOM.
- Быстро – операции DOM часто бывают быстрыми, и вы можете относительно быстро хранить и получать доступ к большому количеству данных.
- Потенциально неопределенная разметка . Обычно для хранения информации используется что-то вроде , потому что проще получить информацию из inputNode.value, но это означает, что у вас есть бессмысленный элемент в HTML. В HTML есть элемент для данных о документе, а в HTML5 появились атрибуты data-* для данных, специально предназначенных для чтения с помощью JavaScript, которые могут быть связаны с определенными элементами.
- Загрязняет источник . Данные, которые генерирует PHP, выводятся непосредственно в HTML, что означает, что вы получаете большой HTML.
- Труднее получить структурированные данные . С труктурированные данные должны быть валидным HTML, иначе вам придется самостоятельно выводить и преобразовывать строки.
- Тесная связь PHP с логикой данных . Поскольку PHP используется в представлении, вы не можете разделить эти два понятия.
Пример реализации
Идея состоит в том, чтобы создать какой-то элемент, который не будет отображаться на странице, но будет виден JavaScript.
index.php
$output = «42»; // результат операции для вывода
echo htmlspecialchars($output); // необходимо экранировать, т.к. результат не будет корректным в HTML
?>
var div = document.getElementById(«dom-target»);
var myData = div.textContent;
Выведите данные прямо в JavaScript.
- Очень легко реализуется – требуется совсем немного времени для реализации.
- Не загрязняет исходный код – переменные выводятся непосредственно в JavaScript, поэтому DOM не затрагивается.
- Тесно связывает PHP с вашей логикой данных – поскольку PHP используется в представлении и вы не можете разделить их.
Пример реализации
Ответ 2
Я обычно использую атрибуты data- * в HTML.
getValue(); ?>»>
$(document).ready(function()
$(‘.service-container’).each(function()
var container = $(this);
var service = container.data(‘service’);
>);
>);
В этом примере используется jQuery, но его можно адаптировать для другой библиотеки или Vanilla JavaScript.
Ответ 3
Мы будем очень благодарны
если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.
Выполнение PHP-кода в файлах JavaScript
В большинстве веб-приложений статические JavaScript-файлы устраивают разработчика на 100%. Однако же иногда бывает лучшим решением подключить PHP и сгенерировать содержимое JS-файла «на лету» (например, получить актуальные цены на продукты из БД и передать их JavaScript-программе для валидации формы заказа). Как же это сделать?
Способ первый: простой
Конечно же, самое простое решение состоит в том, чтобы включить код PHP внутрь секции вашего HTML-шаблона, поскольку есть шансы, что у него будет расширение .php.
Даже если расширение шаблона .htm или .html, то в большинстве случаев веб-сервер настроен так, чтобы понимать включения PHP-кода (если же нет, то в конце заметки есть простой пример как решить и эту проблему). Но что касается красоты, то этот вариант не самый изящный. Хорошо бы держать мух и котлеты раздельно.
Способ второй: красивый
Второй вариант решения — настроить веб-сервер так, чтобы он парсил JavaScript-файлы на предмет выполнения PHP-кода. Достаточно создать в нужной папке файл .htaccess или открыть уже существующий и добавить в него следующие строки:
AddType application/x-httpd-php .js AddHandler x-httpd-php5 .jsSetHandler application/x-httpd-php
Pro et Contra: что нам это дает?
- Вы можете включать PHP-код в файлы с расширением .js и он автоматически выполнится при клиентском обращении к JavaScript-файлу.
- Вы можете держать такие «гибридные» скрипты в отдельной папке — достаточно в эту папку поместить описанный выше файл .htaccess.
- Если вы хотите держать все JavaScript-файлы в одном месте (статические и гибридные), то можете зарегистрировать обработчик файлов с произвольным расширением, например, .js2 — достаточно немного модифицировать текст .htaccess.
- Вы можете разделить статические HTML-страницы, шаблоны и JavaScript-файлы.
- Теоретически это вызовет минимальную дополнительную нагрузку на работу сервера, но, учитывая вариации с отдельными папками или расширениями файлов, польза кажется превосходящей.
Дополнение
Для того, чтобы веб-сервер парсил файлы .htm и .html и выполнял включенный в них PHP-код, нужно добавить в .htaccess следующие строки:
AddType application/x-httpd-php .htm .html AddHandler x-httpd-php5 .htm .htmlSetHandler application/x-httpd-php
Замечания, дополнения и обмен опытом приветствуются.
ВЫВОДЫ
Довольно странно, что небольшая заметка, которая фактически предлагает всего-навсего сниппет для быстрой реализации конкретной практической задачи вызвала такое бурное обсуждение, по большей части похожее на попытки блеснуть теорией. Знаменитое хабра-сообщество в данном случае самоотверженно линчевало те идеи, которые в заметке в принципе не затрагивались. Хотя надо отдать должное — несколько здоровых мыслей все таки есть. И кроме того — нет «никакой другой роскоши, кроме роскоши человеческого общения» (если верить Экзюпери)))).
Как передать переменную с js в php [дубликат]
Способ первый: Необходимо разместить в странице нужный JavaScript-код или сгенерировать его на стороне сервера, как это описано в руководстве по PHP, и передать в браузер пользователя. В этом примере мы определим ширину и высоту экрана пользователя:
\n"; echo 'Высота экрана: ' . $_GET['height'] . "
\n"; > // если переменные не существуют, то выполняем следующее else < // PHP сгенерирует код JavaScript, который обработает браузер // пользователя и передаст значения обратно PHP-скрипту через протокол HTTP echo "\n"; > ?>
Если браузер пользователя поддерживает JavaScript, то после выполнения скрипта страница обновится и мы увидим в адресной строке запрос:
http://путь_к_скрипту/имя_скрипта.php?width=1024&height=768
Знак ? после имени скрипта указывает веб-серверу что мы хотим сделать GET -запрос к нашему PHP-скрипту, после него идет имя нашей переменной и знак равенства, который присваивает переменной следующее за ним значение, определенное JavaScript-функцией. Знак & служит разделителем для переменных в запросе. В результате в PHP будут переданы две переменные: $width со значением равным ширине экрана (1024) и $height со значением равным высоте экрана (768).
А на экране увидим результат выполнения скрипта.
Полученный результат: ширина и высота экрана пользователя
Способ второй: Пишем код JavaScript и выполняем его на стороне пользователя, а потом передаем результат через HTTP-протокол в PHP:
Здесь мы присвоили переменной query запрос со значениями ширины и высоты экрана пользователя, как и в предыдущем примере. В результате выполнения этого кода переменной query будет присвоена строка width=1024&height=768 (при разрешении экрана 1024х768).
Теперь нам нужно передать переменную query из JavaScript в PHP. Передавать запрос будем PHP-скрипту с именем script.php. Для этого мы воспользуемся HTML-тегом , который вставляет изображения в HTML-страницу. Вместо картинки мы укажем имя нашего PHP-скрипта и присоединим к нему переменную query с запросом:
Таким способом можно передавать запросы любому скрипту. Результат выполнения этих двух блоков JavaScript-кода браузер пользователя превратит в следующий HTML-код:
Браузер обратится к серверу за картинкой по указанному адресу и, в результате, сделает GET-запрос к script.php с нужными нам параметрами. Теперь мы можем обработать полученные переменные в нашем script.php:
else < // Здесь пишем код, который выполнится, если переменные не // существуют или можно вообще не использовать else <>> ?>
Способ третий: Данные будут переданы PHP-скрипту после нажатия пользователем на ссылку:
или на кнопку в форме:
В случае использования формы каждую переменную необходимо передавать в отдельном поле. Мы использовали скрытые поля формы, имена которых соответствуют именам переменных в нашем PHP-скрипте. Или же можно вообще не использовать текстовые поля, а передать все данные через параметр action=»» нашей формы:
Заключение
Первый способ не очень удобен, так как браузеру после обработки кода JavaScript нужно обновить страницу, передав PHP-скрипту полученные данные. При использовании второго способа передача данных из JavaScript в PHP проходит незаметно для пользователя без обновления содержимого страницы. Третий способ дает такой же результат, как и первые два, но требует нажатия ссылки или кнопки пользователем. Какой способ лучше использовать? Все зависит только от поставленной задачи.
Любой из этих способов можно использовать для того, чтобы передать значение из JavaScript не только в PHP, но и в Perl, ASP или в любой другой язык программирования, который выполняется на стороне веб-сервера.
Pass Variable From PHP to JavaScript
- Use AJAX to Pass the PHP Variable to JavaScript
- Use JavaScript to Escape the PHP Scripts to Pass the PHP Variable to JavaScript
- Use the Short PHP Echo Tag, Inside the JavaScript to Pass the PHP Variable to JavaScript
We will introduce a way to pass the PHP variable to JavaScript using AJAX. This method requests the data from the PHP server and runs on the client machine.
We will also demonstrate another method to pass the PHP variable in JavaScript by escaping the PHP to JavaScript. We write JavaScript after the PHP scripts to escape the PHP.
We will show you another example to pass the PHP variable to JavaScript using the short echo tag in the JavaScript as where $var is the PHP variable.
Use AJAX to Pass the PHP Variable to JavaScript
We can use AJAX to get the data and variables from the PHP server to JavaScript. This method has separate server-side and client-side scripts. It makes the code cleaner and enhances the code readability. AJAX stands for Asynchronous JavaScript and XML. It uses the XMLHttpRequest object to request the data from the server. It displays the data using JavaScript and HTML DOM. This process occurs asynchronously, which means the changes happen in the webpage without the page being reloaded. However, there is latency when AJAX is used over networks because it sends the HTTP request. In this method, we write JavaScript code in the PHP file.
For example, create a PHP file named index.php . Write the JavaScript code inside the tag. Create a vairable req using the var keyword. Create a request object of the XMLHttpRequest() function and assign it to the req variable. Call the onload() function with the req object using the function expression. Inside the function, use the console.log() function to log the this.responseText property. Do not forget to end the function expression with a semicolon. Use the req object to call the open() function. Supply get , get-data.php and true simultaneously as the parameters in the function. Call the send() function with the req object. Create another PHP file named get-data.php . Assign a value of Mountain to $var variable. Echo the json_encode() function with the $var as the parameter.
In the example below, we created a request object with the XMLHttpRequest() function. The onload() function handles the operation to be performed during the response. The open() function specifies the HTTP method, the PHP file that sends the JSON response, and a boolean value that controls the rest of the execution of the script. The json_encode() function in the get-data.php file sends the response in JSON format. Here, we printed the variable $var in the console.
# php 7.* php ?> var req = new XMLHttpRequest(); req.onload = function() console.log(this.responseText); >; req.open("get", "get-data.php", true); req.send();
# php 7.* php $var = "Mountain"; echo json_encode($var); ?>
"Mountain"
Use JavaScript to Escape the PHP Scripts to Pass the PHP Variable to JavaScript
We can use JavaScript after the PHP tags to escape the PHP scripts. We can create a PHP variable in the PH P script. Then, we can write the JavaScript to escape the above-written PHP and pass the variable inside the JavaScript code. Inside the JavaScript, we can use the PHP tag to echo the PHP variable assigning it to a JavaScript variable.
For example, assign a value Metallica to a variable $var inside the PHP tags. Write a script tag and inside it, write a PHP tag. Inside the PHP tag, echo a JavaScript variable jsvar . Assign the PHP variable $var to jsvar . Do not forget a quote wrapped around the $var and a semicolon after it. Close the PHP tag and log the value of jsvar using the console.log() function. Close the script tag. In the example below, we have logged the PHP variable $var in the console using JavaScript. We can see the output in the console of the webpage.
#php 7.x php $var = 'Metallica'; ?> echo "var jsvar ='$var';"; ?> console.log(jsvar);
Metallica
Use the Short PHP Echo Tag, Inside the JavaScript to Pass the PHP Variable to JavaScript
We can use the short PHP echo tag inside the JavaScript to pass the PHP variable to JavaScript. We can use the short PHP echo tag to get rid of the hassle of writing the PHP tag and the echo statement. It is a short-hand method. This method is very much similar to the second method in terms of the concept and the execution.
For example, assign a value Megadeth to a variable $var inside the PHP tags. Open a script tag and create a JavaScript variable jsvar . Write the short-hand echo tag as the value of the jsvar variable. Log the variable using the console.log() function. We can view the output of the script in the console of the webpage.
#php 7.x php $var = 'Megadeth'; ?> var jsvar = ''; console.log(jsvar); ?>
Megadeth
