Передать переменную php в js файл
В некоторых случаях может потребоваться передать PHP глобальные переменные в сценарий JavaScript . В этой статье я расскажу, как использовать переменные PHP в JavaScript и приведу несколько примеров.
Переменные PHP в JavaScript
Существует целый ряд сценариев, для которых может понадобиться включить переменные PHP в код JavaScript . Например, когда страница сайта запрашивается пользователем, модуль PHP на сервере генерирует страницу, выполнив вычисления и отобразив все переменные страницы в окне браузера.
После того, как загрузка страницы завершена, вы больше не контролируете ее ( за исключением случая, когда у вас есть сервер на основе временных операций ). Но если во время загрузки страницы вы передаете переменные PHP в код JavaScript , то можно продолжать использовать их внутри скриптов JS и управлять отображением страницы и ее динамическим поведением.
Теперь рассмотрим, как можно передать переменные из JavaScript в PHP или наоборот.
3. Передача значений переменных из JavaScript в PHP методом GET
Передача значений переменных языка JavaScript в PHP, задача несколько сложнее, так как требуется передать значение переменной на сервер в интерпретатор языка PHP. Это можно реализовать как методом GET (через адресную строку), так и методом POST. Метод GET предусматривает передачу данных через адресную строку. Поэтому перейдем в файл js/script.js и добавим следующий код:
Обратите внимание, что значение атрибута value я оставил пустым. Мы его установим, используя JavaScript. А именно, создадим переменную search и, используя jQquery, присвоим ее значение атрибуту value текстовому полю:
При этом, значение переменной search будет передано в сценарий языка PHP. Обратите внимание, что обработчиком формы выступает файл view_text.php. Значит, в него нужно добавить код, который обработает данные пришедшие методом POST. Поэтому откроем данный файл и добавим следующий код:
Затем в одном из блоков выведем значение переменной $str:
При этом на экран мы отобразим данные, которые пришли на данную страницу из метода POST, а значит из скрипта написанного на языке JavaScript. Дайте отправим данные формы и посмотрим, что получилось:
Application
If you're writing an application - suddenly the initial load time isn't always as important as the ongoing performance of the application, and it starts to pay off to load data and code separately.
My answer here explains how to load data using AJAX in JavaScript:
Now, the server just needs to contain a /your/url route/file that contains code that grabs the data and does something with it, in your case:
This way, our JavaScript file asks for the data and shows it rather than asking for code or for layout. This is cleaner and starts to pay off as the application gets higher. It's also better separation of concerns and it allows testing the client side code without any server side technology involved which is another plus.
Postscript: You have to be very aware of XSS attack vectors when you inject anything from PHP to JavaScript. It's very hard to escape values properly and it's context sensitive. If you're unsure how to deal with XSS, or unaware of it - please read this OWASP article, this one and this question.
@cHao note the subtlety: JavaScript has its notion of object and JSON has its notion of object - they are not the same. When people misuse the term "JSON object" they mean a JS object, where in JavaScript land - JSON is used as a data serialization format and JSON objects appear inside strings (kind of like SQL queries in server-side languages). However, in this answer the JSON method relies on the fact that most JSON objects are also valid JavaScript object so we write a JSON object into JavaScript code.
OK, you got me there. :) It's still safe, though; PHP's default behavior is to escape such characters (along with other non-ASCII chars), so they never make their way into the output except as \u2028 etc. You'd have to explicitly tell it not to do that.
- PHP 5.2.0 or more
- $PHPVar encoded as UTF-8, Unicode.
Simply use one of the following methods.
OR
May be this is a silly question, but I am absolutely new to PHP world. Once we write the above code in .php file, how do I access the "js_variable" in my JavaScript file or my "index.html" file?
@AnkitPrajapati Try to access it by checking document ready state. Using following script. document.onreadystatechange = () => < if (document.readyState === 'complete') < // document ready alert(js_variable) >>;
I quite like the way the WordPress works with its enqueue and localize functions, so following that model, I wrote a simple class for putting a scripts into page according to the script dependencies, and for making additional data available for the script.
The call to the enqueue_script() function is for adding script, setting the source and dependencies on other scripts, and additional data needed for the script.
And, print_scripts() method of the above example will send this output:
Regardless the fact that the script 'jquery' is enqueued after the 'jquery-ui', it is printed before because it is defined in 'jquery-ui' that it depends on 'jquery'. Additional data for the 'custom-script' are inside a new script block and are placed in front of it, it contains mydata object that holds additional data, now available to 'custom-script'.
-After trying this for a while
Although it works, however it slows down the performance. As PHP is a server-side script while JavaScript is a user side.
We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed. This is written on the question.
Are you sure? Have you seen the top answer to this question? It explains quite a bit. Not to mention that your solution is not secure. $phpVariable = '42"; alert("I am evil!");';
is echo added here to print it on web page having this php code in it or is it just the part of syntax to put data into js variable.@YosraNagati
I have come out with an easy method to assign JavaScript variables using PHP.
It uses HTML5 data attributes to store PHP variables and then it's assigned to JavaScript on page load.
Here is the JavaScript code
While data attributes are a reasonable solution to the problem, you end up with a similar problem to the original question if you don't escape the data in them. It's just you need to escape them for HTML instead of JS.
- Convert the data into JSON
- Call AJAX to recieve JSON file
- Convert JSON into Javascript object
STEP 1
STEP 2
It doesn't work because $val is undefined as far as JavaScript is concerned, i.e. the PHP code did not output anything for $val . Try viewing the source in your browser and here is what you'll see:
This doesn't work because PHP will try to treat myPlugin as a constant and when that fails it will try to treat it as the string 'myPlugin' which it will try to concatenate with the output of the PHP function start() and since that is undefined it will produce a fatal error.
While this is most likely to work, since the PHP code is producing valid JavaScript with the expected arguments, if it fails, chances are it's because myPlugin isn't ready yet. Check your order of execution.
Also you should note that the PHP code output is insecure and should be filtered with json_encode() .
EDIT
Because I didn't notice the missing parenthesis in myPlugin.start( :-\
As @Second Rikudo points out, for it to work correctly $val would need to contain the closing parenthesis, for example: $val="42);"
Meaning that the PHP will now produce myPlugin.start(42); and will work as expected when executed by the JavaScript code.
Here is is the trick:
Here is your 'PHP' to use that variable:
Now you have a JavaScript variable called 'name' , and here is your JavaScript code to use that variable:
Is there any way to get it so that it doesnt actually print into the source code? I have a massive array that I am passing, and it clogs up the source.
Isn't this same as "3. Echo the data directly to JavaScript" in this answer? That one looks even better.
Let's say your variable is always integer. In that case this is easier:
Output:
Let's say your variable is not an integer, but if you try above method you will get something like this:
But in JavaScript this is a syntax error.
So in PHP we have a function call json_encode that encode string to a JSON object.
Since abcd in JSON is "abcd" , it looks like this:
You can use same method for arrays:
And your JavaScript code looks like this:
I'll assume that the data to transmit is a string.
As other commenters have stated, AJAX is one possible solution, but the cons outweigh the pros: it has a latency and it is harder to program (it needs the code to retrieve the value both server- and client-side), when a simpler escaping function should suffice.
So, we're back to escaping. json_encode($string) works if you encode the source string as UTF-8 first in case it is not already, because json_encode requires UTF-8 data. If the string is in ISO-8859-1 then you can simply use json_encode(utf8_encode($string)) ; otherwise you can always use iconv to do the conversion first.
But there's a big gotcha. If you're using it in events, you need to run htmlspecialchars() on the result in order to make it correct code. And then you have to either be careful to use double quotes to enclose the event, or always add ENT_QUOTES to htmlspecialchars. For example:
However, you can't use htmlspecialchars on regular JavaScript code (code enclosed in tags). That makes use of this function prone to mistakes, by forgetting to htmlspecialchars the result when writing event code.
It's possible to write a function that does not have that problem, and can be used both in events and in regular JavaScript code, as long as you enclose your events always in single quotes, or always in double quotes. Here is my proposal, requiring them to be in double quotes (which I prefer):
От автора: в данное время практически каждый сайт использует язык JavaScript и различные библиотеки написанные на нем, к примеру jQuery. И очень часто возникает задача в передаче значений переменных из JavaScript в PHP. Поэтому в данном уроке мы с Вами рассмотрим способы, при помощи которых, можно решить данную задачу. Хочу обратить внимание, что передать можно только значение, а не саму переменную, определенного языка.
Дизайн лендинга
Создавайте дизайн любых сайтов - для себя и на заказ!
Implementation Example
With this, the idea is to create some sort of element which will not be displayed to the user, but is visible to JavaScript.
Как передать переменные PHP во встроенный JavaScript
Существует два основных метода включения кода JavaScript на странице HTML . Первый - мы располагаем код на той же странице, в разделе или в . Предположим, у нас есть встроенный код JS в разделе , и мы хотим передать переменную PHP username в JavaScript . В этом случае мы нужно использовать следующий код:
Мы определили в JS новую переменную и назвали ее username . Затем присвоили этой переменной JS PHP переменную $username , повторив ее. Естественно, переменная $username должна быть определена ранее на странице выше данной строки.
Обратите внимание, что вокруг кода PHP , который выводит $username , мы использовали двойные кавычки ( " ) как при объявлении переменной в JS . Если переменная PHP является числом, то кавычки использовать не нужно. Но убедитесь, что вы правильно использовали кавычки, потому что строка вывода также может содержать кавычки, и это разобьет код JS .
Фреймворк Yii2: первая практика
Овладейте начальными знаниями и навыками по работе в фреймворке Yii2, которые необходимы любому веб-разработчику!
index.php
This is probably the easiest to understand.
- Very easily implemented - It takes very little to implement this, and understand.
- Does not dirty source - Variables are outputted directly to JavaScript, so the DOM is not affected.
- Tightly couples PHP to your data logic - Because PHP is used in presentation, you can't separate the two cleanly.
Explanation of the problem
First, let's understand the flow of events when a page is served from our server:
- First PHP is run, it generates the HTML that is served to the client.
- Then, the HTML is delivered to the client, after PHP is done with it, I'd like to emphasize that once the code leaves the server - PHP is done with it and can no longer access it.
- Then, the HTML with JavaScript reaches the client, which can execute JavaScript on that HTML.
- Send more requests from the client after the initial request is done.
- Encode what the server had to say in the initial request.
19 Answers 19
There are actually several approaches to do this. Some require more overhead than others, and some are considered better than others.
In no particular order:
- Use AJAX to get the data you need from the server.
- Echo the data into the page somewhere, and use JavaScript to get the information from the DOM.
- Echo the data directly to JavaScript.
In this post, we'll examine each of the above methods, and see the pros and cons of each, as well as how to implement them.
This method is considered the best, because your server side and client side scripts are completely separate.
- Better separation between layers - If tomorrow you stop using PHP, and want to move to a servlet, a REST API, or some other service, you don't have to change much of the JavaScript code.
- More readable - JavaScript is JavaScript, PHP is PHP. Without mixing the two, you get more readable code on both languages.
- Allows for asynchronous data transfer - Getting the information from PHP might be time/resources expensive. Sometimes you just don't want to wait for the information, load the page, and have the information reach whenever.
- Data is not directly found on the markup - This means that your markup is kept clean of any additional data, and only JavaScript sees it.
Website
I would not recommend making another request unless your site is an application for getting that information from the server.
You want fast response times which have a huge impact on conversion and load times. Making Ajax requests is slow for the initial uptime in this case and unneeded.
You have two ways to tackle the issue
Setting a cookie is really not very difficult, you just assign it a value:
Then, you can read it with JavaScript using document.cookie :
Here is a short hand rolled parser, but the answer I linked to right above this has better tested ones:
Cookies are good for a little data. This is what tracking services often do.
Once we have more data, we can encode it with JSON inside a JavaScript variable instead:
Всё ещё ищете ответ? Посмотрите другие вопросы с метками php javascript или задайте свой вопрос.
Связанные
Похожие
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Site design / logo © 2022 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2022.5.11.42086
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Want to improve this post? Provide detailed answers to this question, including citations and an explanation of why your answer is correct. Answers without enough detail may be edited or deleted.
I have a variable in PHP, and I need its value in my JavaScript code. How can I get my variable from PHP to JavaScript?
I have code that looks like this:
On the same page, I have JavaScript code that needs the value of the $val variable to be passed as a parameter:
Was the missing closing parenthesis in myPlugin.start( intentional? Is it true that "this works sometimes"??=$val?>
2. Передача значения переменных из PHP в JavaScript
Это пожалуй самый простой способ. Давайте вспомним, где содержится интерпретатор языка JavaScript?
Интерпретатор языка JavaScript, в содержится в браузере. То есть код JavaScript обрабатывается непосредственно браузером, когда страница передается ему от сервера.
Теперь вспомним, где интерпретируется язык PHP? Интерпретатор языка PHP содержится на сервере. При этом PHP интерпретируется до того как страница попадет в браузер, пользователя. Значит, для передачи значения переменной языка PHP в язык JavaScript, достаточно между тегами script вывести значение этой переменной. К примеру, создадим переменную в конфигурационном файле config.php (переменная PHP):
Затем, в файле index.php передадим ее значение в JavaScript (перед подключением файла js/script.js):
Теперь в файле js/script.js используем значение данной переменной. А именно, создадим блок с классом for_button, в блоке
с классом content и как содержимое добавим в него значение переменной. Для этого используем библиотеку jQuery и ее метод prepend, который добавляет html код в выбранный блок.
$ ( ".content" ) . prepend ( "
" + button + "
" ) ;И добавим несколько правил css для нового созданного блока в файл css/style.css:
Теперь давайте посмотрим, что у нас получилось:
Как Вы видите, мы создали новый блок, в виде кнопки и его содержимое формируется в переменной PHP.
В Гармонии с Кодом
Если вы хотите создать сайт своими руками, то вы оказались в нужном месте. Здесь вы найдете обучающие видеокурсы, а также множество видеоуроков и статей по веб-разработке и созданию сайтов.
Am I writing a website or an application?
Websites are mainly page based, and the page load times needs to be as fast as possible (for example - Wikipedia). Web applications are more AJAX heavy and perform a lot of round trips to get the client fast information (for example - a stock dashboard).
1. Постановка задачи
Для начала рассмотрим сайт, на примере которого, мы будем изучать тему сегодняшнего урока:
Бесплатный курс по PHP программированию
Освойте курс и узнайте, как создать веб-приложение на PHP с полного нуля
Это очень простой сайт, состоящий из двух страниц: главная страница, выводит список статей хранящихся в базе данных, и страница полного просмотра текста статьи. Исходный код данного сайта, я здесь приводить не буду, так как он будет доступен Вам в исходниках к этому уроку. Рассмотрим только назначение главных файлов:
index.php – подключает необходимые файлы и выводит главную страницу на экран;
view_text.php – выводит страницу просмотра полного текста статьи;
config.php – содержит настройки для подключения к базе данных и собственной само подключение;
funcntions.php – содержит две функции по получению всех статей из базы данных и получению одной конкретной статьи по ее идентификатору;
js/script – пустой файл, в котором мы будем писать скрипты на языке JavaScript;
css/style.css – файл стилей для сайта.
Теперь давайте рассмотрим способы передачи значений переменных из JavaScript в PHP.
3 ответа 3
Их можно передать в JS одним из способов:
- через GET-параметры, если на документ ссылаетесь откуда-то
- встроив значение переменных в DOM-документа
- подгрузив через AJAX с сервера, например, сформировав JSON-ответ
- через cookie
- сформировав JS-код средствами PHP
Самый простой случай - это передача переменных через DOM, можно положить их например в data-атрибут, какого-то скрытого div-документа
Тогда если вы пользуетесь jQuery, вы сможете обратится к этим атрибутам через метод data()
У вас не получается потому что к моменту, когда вы пытаетесь обратиться из js файла на машине пользователя к перемнным, находящимся на сервере, то эти переменные уже "мертвы". PHP отработал, отдал данные пользователю, и уже знать не знает что происходит со страницей в браузере у пользователя.
Я бы завел бы файл, например vars.php :
Так как php исполняется на сервере, а js - на клиенте, один из способов получить значение переменных - просто вывести их в блоке скрипт, например так
Теперь в момент выполнения скрипта, будет объявлена глобальная переменная, которая будет доступна и внутри подгружаемого скрипта.
Дополнительный вариант: добавить настройки сервера, чтобы js файлы также обрабатывались как php.
Как передать переменные PHP во внешний JavaScript
Также JS код может храниться во внешнем файле ( например, script.js ), связанном со страницей HTML . Например, если вы хотите передать значение переменной времени ( в секундах ) в таймер JS , можно использовать следующий код:
Код во внешнем файле JS ( script.js ):
В приведенном выше коде мы сначала инициализируем значение PHP переменной $seconds переменной JS seconds . После этого переменная становится доступной в DOM , и подключаемый скрипт ( script.js ) может использовать ее. В приведенном выше примере пользователь перенаправляется на главную страницу после установленного промежутка времени.
Т.е. в php я присвоил значения переменным, а теперь хочу к ним обратиться из файла load_map_step.js. Пытаюсь так но ничего не получается, данные пустые.
index.php (or whatever the actual page is named like)
The above combination of the two files will alert 42 when the file finishes loading.
5. Асинхронный способ передачи значений переменных из JavaScript в PHP и наоборот
До сих пор, мы с Вами рассматривали так называемый синхронный способ передачи данных на сервер. То есть, когда при передаче данных мы с Вами видели перезагрузку страницы в браузере, так образом на любое наше действие браузер отправляет данные на сервер, что сопровождается обновлением страницы.
Но, как Вы знаете, существует метод AJAX, используя который можно передавать асинхронные запросы на сервер. При которых, данные все также отправляются на сервер, но обновление страницы не происходит, то есть данные отправляются как бы в фоне и пользователь, этого не замечает.
Для работы с AJAX используем библиотеку jQuery и ее метод ajax, со следующими параметрами:
type:’POST’ – тип запроса на сервер;
url:’index.php’ – путь к файлу на серверу, в который отправляем данные;
dataType:’json’ – формат данных, которые придут как ответ от сервера. В данном случае условимся, что сервер отправит данные в формате JSON. При этом полученная строка будет автоматически конвертирована в объект. JSON – специальный строковый формат представления данных. Используя, который можно представить любой массив или объект в виде обычной строки, с которой удобно выполнять различные манипуляции.
Пример JSON строки, описывающей объект с двумя свойствами: firstname и lastname:
data – данные которые отправляются на сервер. Обратите внимание, что на сервер мы отправим объект ob, который представим в виде JSON строки, при помощи функции JSON.stringify(ob);
success – описываем функцию которая будет выполнена в результате успешного запроса к серверу. Параметр html, данной функции – это ответ от сервера. Который должен обязательно прийти в формате JSON, в соответствии с настройкой dataType, и который будет конвертирован в объект (то есть в html содержится ответ от сервера в виде объекта). В теле данной функции, выведем на экран заголовок статьи (условимся, что ответ от сервера – это будет массив данных о конкретной статье). Для этого используем метод prependTo(), и вставим данные в блок с классом for_content. При этом добавим анимационный эффект появления данных на экране, при помощи метода fadeIn() (метод hide() необходим, что бы мгновенно скрыть выводимый на экран блок, для того что бы в последствии его можно было плавно показать на экран, используя метод fadeIn()).
Теперь, так как мы передаем данные в файл index.php, в него необходимо добавить код, который обработает эти данные:
То есть, проверяем, если пришли данные методом POST, то сохраняем их в переменную $param. При этом предварительно обработав их функцией json_decode(). Которая декодирует JSON строку и возвращает объект, хранящийся в ней. Таким образом в переменной $param содержится объект. У которого есть свойство $id, его мы используем в качестве идентификатора статьи для функции get_text(), которая вернет массив данных статьи по ее идентификатору. Этот массив мы сохраним в переменную $row. Затем конвертируем его в JSON строку и выводим на экран, используя функцию echo. Так как мы обращаемся к данному файлу асинхронно, и данный участок кода сработает, когда придут данные методом POST (а в нашем случае, они придут только асинхронно). Поэтому весь вывод на экран и будет являться ответом от сервера, который попадет в переменную html. Далее что бы в ответ от сервера, не попало лишних данных, мы выполняем exit().
Вот и все, можно проверять работу нашего скрипта:
Как Вы видите, Все успешно работает. Таким образом, мы с Вами передали значение переменной JavaScript в PHP и наоборот, используя асинхронные запросы к серверу.
В этой небольшой статье мы рассмотрим с вами один интересный момент, касающийся передачи значений переменных.
Иногда возникает необходимость использовать значение PHP-переменной в JavaScript-сценарии, либо наоборот: есть JavaScript-переменная, значение которой нам нужно использовать в PHP-скрипте.
В этом уроке мы рассмотрим простые примеры, которые позволят вам понять общий механизм того, как это можно реализовать.
Для определенности, предлагаю вам создать на локальном компьютере хост с именем php_js и разместить там файл index.php, в котором мы и будем рассматривать наши примеры.
Каркасом файла index.php будет простая HTML-разметка:
Для большей наглядности весь код (включая JavaScript) мы будем писать внутри тэгов body.
1. Передача значения PHP-переменной в JavaScript
Давайте напишем такой код в тэге body:
Итак, у нас есть PHP-переменная с именем name и значением Юрий, и наша задача состоит в том, чтобы это значение вывести на экран, но не средствами PHP, а с помощью JavaScript.
Для этого мы открываем как обычно блок JavaScript-кода и внутри него объявляем переменную с произвольным именем (в нашем случае - userName). Теперь мы этой переменной присваиваем в качестве значения результат работы оператора echo применительно к переменной name.
Как вы видите, мы делаем это в блоке PHP-кода, который открываем и закрываем в пределах одинарных кавычек, обрамляющих строковое значение переменной userName в JavaScript-сценарии.
Таким образом, мы с помощью языка PHP формируем синтаксически верный код JavaScript, который будет корректно выполнен.
В результате выполнения этой строки в переменную userName попадет значение Юрий.
Вот и все. Значение PHP-переменной name было передано в JavaScript-переменную userName.
Теперь нам нужно только убедиться, что в нашей JavaScript-переменной userName хранится ожидаемое значение. Для этого мы выводим значение данной переменной на экран с помощью document.write.
В исходном коде сформированной страницы мы увидим при этом следующую картину:
На этом здесь все, и мы можем двигаться дальше.
2. Передача значения JavaScript-переменной в PHP (метод GET)
Здесь, как вы понимаете, ситуация у нас обратная. В наличии есть JavaScript-переменная, и ее значение нужно каким-то образом передать в PHP-сценарий.
Понятно, что эта задача несколько сложнее, ведь если в первом случае (передача значения PHP-переменной в JavaScript) у нас уже была PHP-переменная, значение которой мы просто вывели внутри JavaScript-кода, то здесь такой вариант не пройдет.
Ведь PHP-скрипт ничего не знает о том, что у нас создана некая JavaScript-переменная. И не узнает он об этом до тех пор, пока мы не отправим серверу GET или POST-запрос, в котором будет фигурировать значение JavaScript-переменной.
Вот тогда, уже на следующем запросе, мы сможем получить доступ к значению этой JavaScript-переменной из PHP-сценария.
Под уже существующим кодом допишем следующее:
Начало у нас похожее: в блоке JavaScript-кода мы объявляем переменную с именем userName3 и значением Александр.
Далее мы открываем тэг параграфа для того, чтобы внутри него вывелось значение JavaScript-переменной.
После этого переходим к PHP-коду. Мы видим, что в ветке if проверяется существование в глобальном массиве $_POST элемента с индексом u_name.
Если данный элемент будет найден, то он будет выведен на экран и будет закрыт тэг параграфа для всего предложения.
В случае отстутствия данного элемента в массиве $_POST управление передается ветке else.
Для этого мы выводим на страницу открывающий и закрывающий блоки JavaScript-кода с помощью опрератора echo, и внутри них формируем синтаксически верный JavaScript-код.
Наша задача сводится к тому, чтобы, используя команду вывода document.write в JavaScript, вывести на страницу обычную HTML-форму и подставить в единственное ее текстовое поле с именем u_name значение, которое хранится в переменной userName3 (Александр).
Самое сложное здесь - не запутаться в кавычках и их экранировании.
Именно поэтому перед написанием подобных скриптов я рекомендую вам сперва создать отдельный файл и написать в нем чистый JavaScript-код, который бы выводил форму и подставлял в поле значение переменной userName3.
Когда вы с этим справитесь, то можете возвращаться к исходному файлу и задача ваша будет заключаться в том, чтобы в точности вывести тот код, который вы написали чуть раньше. На этот раз - уже средствами PHP.
Именно это мы и делаем в ветке else. Обратите внимание, что текст для вывода (предназначенный для оператора echo) заключен в двойные кавычки. Соответственно, для конструкции document.write мы используем одинарные кавычки.
Это обстоятельство приводит к тому, что нам нужно проэкранировать все символы одинарных кавычек, которые находятся между открывающими и закрывающими одинарными кавычками, ограничивающими вывод строки для конструкции document.write.
Если сейчас обратиться к странице index.php, то результат будет следующий:
Как вы видите, после фразы "Значение JavaScript-переменной:" идет пустота, т.е. пока еще PHP-сценарий не получил значение JavaScript-переменной userName3. И это понятно - ведь еще не было запроса к серверу, в котором могла быть передана эта информация.
При этом ниже в форме у нас находится слово Александр - как раз значение JavaScript-переменной userName3.
Мы вставили его сюда как раз для того, чтобы отправлить форму и передать значение этой переменной методом POST нашему текущему скрипту index.php (если атрибут action отсутствует, то данные будут переданы текущему скрипту).
После нажатия на кнопку отправки мы увидим такую картину:
Теперь форма у нас исчезла, т.к. уже отрабатывает ветка if, и вместо нее выводится значение переменной.
Ну что ж, с этой задачей мы тоже справились - значение JavaScript-переменной userName3 мы передали в PHP-скрипт и вывели его на экран из массива $_POST.
На этом данную небольшую статью я завершаю. Очень надеюсь, что она поможет вам понять базовые принципы передачи значений переменных из JavaScript в PHP и обратно.
С уважением, Дмитрий Науменко.
P.S. Присмотритесь к премиум-урокам по различным аспектам сайтостроения, включая JavaScript, jQuery и Ajax, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить практические навыки веб-программирования:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Смотрите также:
Solutions
That's the core question you should be asking yourself is:
get-data.php
Some more reading material
This method is less preferable to AJAX, but it still has its advantages. It's still relatively separated between PHP and JavaScript in a sense that there is no PHP directly in the JavaScript.
- Fast - DOM operations are often quick, and you can store and access a lot of data relatively quickly.
- Potentially Unsemantic Markup - Usually, what happens is that you use some sort of to store the information, because it's easier to get the information out of inputNode.value , but doing so means that you have a meaningless element in your HTML. HTML has the element for data about the document, and HTML 5 introduces data-* attributes for data specifically for reading with JavaScript that can be associated with particular elements.
- Dirties up the Source - Data that PHP generates is outputted directly to the HTML source, meaning that you get a bigger and less focused HTML source.
- Harder to get structured data - Structured data will have to be valid HTML, otherwise you'll have to escape and convert strings yourself.
- Tightly couples PHP to your data logic - Because PHP is used in presentation, you can't separate the two cleanly.
Implementation Example
With AJAX, you need two pages, one is where PHP generates the output, and the second is where JavaScript gets that output:
Поиск по сайту
Implementation Example
Implementation is relatively straightforward:
I disagree with "Highly insecure!!" and "Structured data is hard". Encode data as JSON (JavaScript Object Notation, after all), and there you go!
What about the significant overhead and code complexity asynchronousity introduces when making an AJAX request? When working on a JavaScript light website - making an AJAX request is tedious and not best practices.
@BenjaminGruenbaum — JS being invalid JSON is irrelevant. I can't think of any JSON that is invalid in JavaScript on the right hand side of an assignment.
@SecondRikudo In method 3, that example can kill the website. Example: '; echo json_encode($output); ?> . See this question for details. Solution: Use JSON_HEX_TAG to escape < and >(requires PHP 5.3.0).?php>
I usually use data-* attributes in HTML.
This example uses jQuery, but it can be adapted for another library or vanilla JavaScript.
I agree, not wanting to over-analyze and implement a fancy solution for a simple problem. This method separates PHP from Javascript, so that PHP still generates the HTML only, while Javascript can be external to the PHP file.
I agree this is the best option. It solves all the security issues, without the latency. You can keep JS entirely out of your HTML pages. HTML needs to be served by the application server, but JS (and CSS) does not. It's also more semantic.
@asdasd — Well yes, I was just addressing the specific problem with the code in your answer rather than the general case.
I'm going to try a simpler answer:
Читайте также: