Как передать переменную JavaScript в PHP и наоборот?
На форумах очень часто можно встретить вопросы вроде:
Как передать переменную в JavaScript из PHP? или Как передать данные из PHP в JavaScript?
Эти вопросы выдают новичков и сейчас я постараюсь объяснить почему. А также ответить как же все-таки это сделать.
Почему вопрос о передаче переменной из языка в язык — вопрос новичка? Потому что невозможно это сделать! Языки программирования работают каждый самостоятельно. А передача напрямую между ними невозможна. Сейчас объясню почему.
Дело в том, что PHP и JavaScript связаны лишь условно. PHP работает на сервере, а JavaScript — в браузере.
Напомню алгоритм работы интернета. То есть, что происходит, когда вы запрашиваете адрес. Например, что должно произойти чтобы выполнилась JavaScript функция на странице http://dayte2.com.
- Браузер формирует заголовки запроса, присоединяет к в них какую-то важную информацию о себе и отсылает их на этот адрес.
- Сервер принимает заголовки и понимает что нужно отдать документ. Он понимает, что запрашивается не документ, а программа. Тогда он запускает эту программу и отдает ей все данные, что получил от браузера.
- Программа (php-скрипт) запускается, отрабатывает и просто печатает результат своей работы. Результатом работы может быть html-страница, куда включены JavaScript-скрипты. Но мы помним, что в данный момент работает PHP и JavaScript для него ничем не отличается от любых других данных. Просто буковки.
- Сервер получает то, что напечатала программа. Прикрепляет заголовки ответа и отсылает все это запросившему браузеру.
- Браузер получает код страницы и отображает его. Догружает нужные файлы (js, css, картинки), применяет их к html-коду. И только теперь включается JavaScript, встроенный в браузер.
Если посмотреть внимательно на этот порядок работы, можно ответить на вопрос
Как передать переменную из PHP в JavaScript?
Нужно во время выполнения скрипта PHP просто сформировать такой текст, чтобы он потом мог выполниться в браузере. Например.
Если вы создадите файл php с таким содержимым и запустите его из браузера — вы увидите пустую страницу и сообщение alert.
Разумеется, нужно помнить, что синтаксис должен быть JavaScript. Фактически, когда мы формируем код JS на PHP — мы должны помнить, что сначала php что-то сгенерирует и это что-то должно быть валидным JS.
В данном случае наш php-скрипт формирует строку:
А это — вполне корректный JavaScript, который будет выполнен браузером.
Как передать переменную из JavaScript в PHP?
Можно догадаться, тут дела обстоят труднее. Ведь php генерирует JS, а вот обратная связь не подразумевается особо. Так что хочешь-не хочешь, а придется формировать новый запрос к серверу, передавая в нем данные для скрипта. У нас есть два основных метода передачи данных. Реализация может быть как через синхронные, так и через асинхронные запросы. Синхронные вызовут перезагрузку страницы, а асинхронные используют Ajax.
Синхронный метод передачи данных в php из JavaScript
Этот код немедленно перенаправит пользователя по адресу http://dayte2.com/index.php?message=Hello%2C%20server!
PHP-код в файле index.php получит данные из GET и сформирует суперглобальные массивы.
Асинхронная передача переменной из JavaScript в PHP
Это подразумевает использование Ajax. По сути, осуществляется то же, что и в предыдущем случае, но не перезагружается страница браузера. Проще всего это проиллюстрировать используя библиотеку jQuery.
Как видим, все еще проще. Не нужно применять функцию encodeURIComponent, ее применяет за нас jQuery. Мы описываем функцию, которая принимает ответ сервера и складывает его в переменную data. Если index.php возвращает просто значение переменной $_GET[message], то мы увидим alert с текстом «Сервер ответил: Hello, server!».
Передача сложных объектов из php в Javascript
Мы помним, что при генерации JavaScript из php, нужно придерживаться синтаксиса JavaScript. Поэтому нужно перевести данные из представления PHP в представление JavaScript. Проще всего это сделать, воспользовавшись форматом JSON и функцией json_encode(), которая превратит объект или массив php в строку, которая при выполнении движком JavaScript, даст объект JavaScript.
Тут можно начать путаться. Но ничего страшного нет. Достаточно помнить последовательность. Сперва выполняется php, затем — JavaScript. После выполнения php получится:
Что при выполнении выведет нам alert с текстом ‘123’.
Итого
Нужно помнить что php генерирует JS, поэтому передавать из него данные довольно просто. Нужно формировать JS так же, как формируется html. С соблюдением синтаксиса JavaScript.
Для передачи данных из JS в PHP всегда используется дополнительный запрос. Как он осуществляется — дело десятое. Например, может формироваться и отправляться форма. Или открываться iframe. Но суть остается. Понимая эту суть, можно перекидывать любые данные из браузера на сервер и обратно довольно просто.
Передать значение переменной из PHP в JS Ajax
Добрый день, коллеги. Подскажите как передать значение переменной из php-файла в js другой страницы.
Вот скрипт в index.html
Через ajax в url:’ajax.php’, нужно передать одну переменную, и значение radio кнопки
Как значение radio передать я разобрался, а вот как еще переменную со страницы кинуть в url.
Передать значение из ajax в php
Есть форма регистрации. Мне нужно проверить, существует ли пользователь с таким ником.
Передать в ajax уникальное значение из PHP
Здравствуйте! Пытаюсь сделать книжный интернет-магазин, встала проблема: цикл выводит на страницу.
Не получается передать значение из jquery и ajax в php
Нужно полученое значение из переменной n передать в php страницу .
Как передать переменные и данные из PHP в JavaScript?
У меня есть переменная в PHP, и мне нужно ее значение в моем JavaScript-коде. Как я могу получить свою переменную от PHP до JavaScript?
У меня есть код, который выглядит так:
У меня есть JavaScript-код, который нуждается в val и выглядит по строкам:
20 ответов
На самом деле существует несколько способов сделать это. Некоторым требуется больше накладных расходов, чем другие, а некоторые считаются лучше других.
Без особого порядка:
- Используйте AJAX для получения необходимых данных с сервера.
- Выбросьте данные на страницу где-нибудь и используйте JavaScript для получения информации из DOM.
- Отбросить данные непосредственно на JavaScript.
В этом сообщении мы рассмотрим каждый из вышеперечисленных методов и рассмотрим все плюсы и минусы каждого, а также как их реализовать.
1. Используйте AJAX для получения необходимых данных с сервера
Этот метод считается лучшим, потому что ваши сценарии на стороне сервера и на стороне клиента полностью разделены.
- Лучшее разделение между слоями. Если завтра вы перестанете использовать PHP и хотите перейти на сервлет, REST API или какую-либо другую услугу, вам не придется менять большую часть JavaScript код.
- Более читаемый. JavaScript — это JavaScript, PHP — PHP. Без смешивания двух вы получите более читаемый код на обоих языках.
- Разрешает передачу данных async. Получение информации от PHP может быть дорогостоящим временем/ресурсами. Иногда вы просто не хотите ждать информации, загружать страницу и получать информацию всякий раз.
- Данные не отображаются непосредственно в разметке. Это означает, что ваша разметка не очищается от каких-либо дополнительных данных, и только JavaScript видит ее.
Против
- Задержка. AJAX создает HTTP-запрос, а HTTP-запросы переносятся по сети и имеют сетевые задержки.
- Состояние. Данные, полученные с помощью отдельного HTTP-запроса, не будут содержать никакой информации из HTTP-запроса, который извлекал HTML-документ. Вам может понадобиться эта информация (например, если HTML-документ создается в ответ на отправку формы), и если вам это нужно, вам придется каким-то образом передать его. Если вы исключили вложение данных на странице (которые у вас есть, если вы используете эту технику), это ограничивает вас куки/сеансы, которые могут быть подвергнуты условиям гонки.
Пример реализации
С AJAX вам нужны две страницы, одна из которых — PHP, генерирующая вывод, а вторая — где JavaScript получает этот вывод:
Get-data.php
index.php(или независимо от того, какая фактическая страница названа так)
Вышеуказанная комбинация двух файлов будет предупреждать 42 , когда файл завершит загрузку.
Несколько дополнительных материалов для чтения
- Использование XMLHttpRequest — MDN
- Ссылка на объект XMLHttpRequest — MDN
- Как вернуть ответ от асинхронного вызова?
2. Повторите отправку данных на страницу и используйте JavaScript для получения информации из DOM
Этот метод менее предпочтителен для AJAX, но он все еще имеет свои преимущества. Он все еще относительно разделен между PHP и JavaScript в том смысле, что в JavaScript нет PHP.
- Быстрый — операции DOM часто бывают быстрыми, и вы можете быстро хранить и получать доступ к большому количеству данных.
Против
- Потенциально несекретная разметка. Обычно происходит то, что вы используете какой-то <input type=hidden> для хранения информации, потому что проще получить информацию из inputNode.value , но это означает, что что у вас есть бессмысленный элемент в вашем HTML. HTML имеет элемент <meta> для данных о документе, а в HTML 5 вводятся атрибуты data-* для данных, специально предназначенных для чтения с помощью JS, которые могут быть связаны с определенными элементами.
- Dirties up the Source. Данные, генерируемые PHP, выводятся непосредственно в исходный HTML-код, что означает, что вы получаете больший и менее сфокусированный источник HTML.
- Сложнее получить структурированные данные. Структурированные данные должны быть действительными HTML, иначе вам придется избегать и преобразовывать строки самостоятельно.
- Плотно привязайте PHP к логике данных. Поскольку PHP используется в презентации, вы не можете отделить эти два.
Пример реализации
При этом идея состоит в том, чтобы создать какой-то элемент, который не будет отображаться для пользователя, но будет виден JavaScript.
index.php
3. Echo данные непосредственно на JavaScript
Это, наверное, проще всего понять, и наиболее ужасно использовать. Не делайте этого, если не знаете, что делаете.
- Очень легко реализовано. Это очень мало для реализации и понимания.
- Не загрязняет источник. Переменные выводятся непосредственно на JavaScript, поэтому DOM не затрагивается.
Против
- Небезопасно. PHP не имеет тривиальных функций escape-кода JavaScript, и они не являются тривиальными для реализации. Особенно при использовании пользовательских входов вы чрезвычайно уязвимы для инъекций второго уровня. Спорный см. комментарии
- Плотно привязайте PHP к логике данных. Поскольку PHP используется в презентации, вы не можете отделить эти два.
- Структурированные данные трудны. Возможно, вы можете сделать JSON. kinda. Но XML и HTML потребуют особого внимания.
Пример реализации
Реализация относительно проста:
Я попробую более простой ответ:
Объяснение проблемы
Во-первых, позвольте понять поток событий, когда страница обслуживается с нашего сервера:
- Первый PHP запущен, он генерирует HTML, который подается клиенту.
- Затем HTML доставляется клиенту, после того как PHP будет с ним сделан, я хотел бы подчеркнуть, что после того, как код покинет сервер — PHP завершен с ним и больше не сможет его получить.
- Затем HTML с JavaScript доходит до клиента, который может выполнять JS на этом html.
Так что, главное, чтобы помнить, что HTTP является апатридом. После того, как запрос покинул сервер, сервер не может его коснуться. Таким образом, это оставляет наши возможности:
- Отправлять больше запросов от клиента после завершения первоначального запроса.
- Кодировать то, что сервер должен был сказать в первоначальном запросе.
Решение
Что основной вопрос, который вы должны задать себе:
Я пишу веб-сайт или приложение?
Веб-сайты в основном основаны на страницах, а время загрузки страницы должно быть как можно быстрее (например, Википедия). Веб-приложения более тяжелые AJAX и совершают много круговых поездок, чтобы быстро получить информацию о клиенте (например, панель управления запасами).
Отправка большего количества запросов от клиента после выполнения первоначального запроса медленно, поскольку для этого требуется больше HTTP-запросов, которые имеют значительные накладные расходы. Более того, для асинхронности требуется асинхронность, так как для запроса AJAX требуется обработчик для завершения.
Я бы не рекомендовал делать другой запрос, если ваш сайт не является приложением для получения этой информации с сервера.
Вы хотите быстрое время отклика, которое оказывает огромное влияние на время конверсии и загрузки. Выполнение запросов ajax в этом случае замедляется для первоначального времени безотказной работы.
У вас есть два способа решения проблемы.
- Установить cookie — файлы cookie — это заголовки, отправленные в HTTP-запросах, которые могут считываться как сервером, так и клиентом.
- Кодировать переменную как JSON. JSON очень близок к объектам JavaScript, и большинство объектов JSON являются действительными переменными JavaScript.
Настройка файла cookie действительно не очень сложно, вы просто назначаете ему значение:
Затем вы можете прочитать его с помощью JavaScript с помощью document.cookie :
Вот короткий рулонный парсер, но ответ, который я связал прямо над ним, имеет лучшие проверенные:
Файлы cookie хороши для небольших данных. Это то, что часто делают службы отслеживания.
Как только у нас будет больше данных, мы можем закодировать его с JSON внутри JS-переменной:
Предполагая, что $value является json_encode способным на стороне PHP (это обычно есть). Этот метод — это то, что StackOverflow делает со своим чатом, например (только с использованием .net вместо php).
Применение
Если вы пишете приложение — внезапно начальное время загрузки не всегда так важно, как текущая производительность приложения, и он начинает окупаться для загрузки данных и кода отдельно.
Мой ответ здесь объясняет, как загружать данные с помощью AJAX в JavaScript:
Или с помощью jQuery:
Теперь сервер просто должен содержать маршрут /your/url route/file, который содержит код, который захватывает данные и что-то делает с ним, в вашем случае:
Таким образом, наш JS файл запрашивает данные и показывает их, а не запрашивает код или макет. Это чище и начинает окупаться по мере того, как приложение становится выше. Это также улучшает разделение проблем и позволяет тестировать код на стороне клиента без участия какой-либо технологии на стороне сервера, что является еще одним плюсом.
Постскриптум: Вы должны быть очень осведомлены о векторах атаки XSS, когда вы добавляете что-либо от PHP к JavaScript. Очень трудно избежать значений правильно, и это зависит от контекста. Если вы не знаете, как обращаться с XSS или не знаете об этом — прочитайте эту статью OWASP, этот и этот вопрос.
Я обычно использую атрибуты data- * в html.
В этом примере используется jQuery, но может быть адаптирован для другой библиотеки или ванильного Javascript.
- PHP 5.2.0 и более
- $PHPVar закодирован как UTF-8, Unicode.
Просто используйте один из следующих способов.
ИЛИ
Мне очень нравится, как WordPress работает со своими enqueue и localize функциями, поэтому после этой модели я написал простой класс для размещения сценариев на странице в соответствии с зависимостями script и для предоставления дополнительных данных для script.
Вызов функции enqueue_script() предназначен для добавления script, установки сума и зависимостей других скриптов и дополнительных данных, необходимых для script.
И, метод print_scripts() вышеприведенного примера отправит этот вывод:
Независимо от того, что script ‘jquery’ находится в очереди после «jquery-ui», он печатается раньше, потому что он определен в «jquery-ui», который зависит от «jquery». Дополнительные данные для «custom- script» находятся внутри нового блока script и расположены перед ним, он содержит объект mydata , который содержит дополнительные данные, теперь доступный для «custom-script».
-После попытки этого на некоторое время Хотя он работает, однако он замедляет производительность. поскольку php является серверной стороной script, в то время как javascript является пользовательской стороной.
Это не работает, потому что $val имеет значение undefined в отношении javascript, т.е. php ничего не выводил для $val . Попробуйте просмотреть источник в своем браузере, и вот что вы увидите:
Это не работает, потому что php будет пытаться рассматривать myPlugin как константу, а когда это не удается, он попытается рассматривать его как строку ‘myPlugin’ , которую он попытается связать с выходом функции php start() , и поскольку это undefined, это приведет к фатальной ошибке
В то время как это, скорее всего, сработает, поскольку php генерирует действительный javascript с ожидаемыми аргументами, если он терпит неудачу, скорее всего, это потому, что myPlugin еще не готов. Проверьте порядок выполнения.
Также вы должны заметить, что php out put небезопасен и должен быть отфильтрован с помощью json_encode()
EDIT
Поскольку я не заметил отсутствующую скобку в myPlugin.start(<?=$val?> : -\
Как отмечает @Second Rikudo, для правильной работы $val необходимо было бы закрыть закрывающую скобку, например: $val=»42);»
Значение, которое php теперь произведет myPlugin.start(42); и будет работать как ожидалось, когда выполняется javascript
Я выступил с простым методом назначения переменных JavaScript с помощью PHP.
Он использует атрибуты данных HTML5 для хранения переменных PHP, а затем присваивается JavaScript при загрузке страницы.
Полный учебник можно найти здесь
- Преобразовать данные в JSON
- Вызовите AJAX для получения файла JSON
- Конвертировать JSON в объект Javascript
ШАГ 1
ШАГ 2
вот ваш «PHP» для использования этой переменной:
Теперь у вас есть переменная JS с именем ‘name’ , и вот ваш «Javascript» для использования этой переменной:
вот один, который я не вижу в качестве опции. он похож на использование ajax, но явно отличается.
сначала установите источник script непосредственно в файл PHP.
вы даже можете передать переменную обратно в файл PHP, такой как этот пример:
затем в «your_php_file.php»:
После долгих исследований я нашел самый простой способ легко передавать все виды переменных.
В сценарии сервера у вас есть две переменные, и вы пытаетесь отправить их клиентским сценариям:
В любом из ваших javascript, вызываемых на странице, просто вызывайте эти переменные.
пусть ваша переменная всегда целая, в этом случае это проще
выход:
скажем, ваша переменная не является целым числом, но если вы попробуете метод выше, вы получите что-то вроде этого:
но в javascript это синтаксическая ошибка.
поэтому в php мы вызываем функцию json_encode которая кодирует строку для json-объекта.
поскольку abcd в json это «abcd» , поэтому он выглядит так:
Вы можете использовать тот же метод для массивов:
и ваш javascript выглядит так:
Я предполагаю, что передаваемые данные являются строкой.
Как отмечают другие комментаторы, AJAX — одно из возможных решений, но недостатки превосходят плюсы: у него есть латентность, и сложнее запрограммировать (ему нужен код для извлечения значения как на стороне сервера, так и на стороне клиента) когда требуется более простая функция экранирования.
Итак, мы вернулись к побегу. json_encode($string) работает, если вы сначала кодируете исходную строку как UTF-8, если ее еще нет, потому что json_encode требует данных UTF-8. Если строка находится в ISO-8859-1, вы можете просто использовать json_encode(utf8_encode($string)) ; в противном случае вы всегда можете использовать iconv для выполнения преобразования.
Но там большая добыча. Если вы используете его в событиях, вам нужно запустить htmlspecialchars() в результате, чтобы сделать правильный код. И тогда вам нужно быть осторожным, чтобы использовать двойные кавычки для включения события или всегда добавлять ENT_QUOTES в htmlspecialchars. Например:
Однако вы не можете использовать htmlspecialchars для обычного JS-кода (код, заключенный в теги <script> . </script> ). Это позволяет использовать эту функцию, подверженную ошибкам, забыв htmlspecialchars результат при написании кода события.
Можно написать функцию, которая не имеет этой проблемы, и может использоваться как в событиях, так и в регулярном JS-коде, если вы включаете свои события всегда в одинарные кавычки или всегда в двойные кавычки. Вот мое предложение, требующее, чтобы они были в двойных кавычках (что я предпочитаю):
Pass Variable From PHP 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 <?=$var?> 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 <script> 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.
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.
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 <?=$var?> 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.
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.