Я хочу использовать переменную PHP в JavaScript. Как это возможно?
Вы можете напечатать переменную PHP в своем javascript, пока ваша страница создана.
<script type="text/javascript"> var MyJSStringVar = "<?php Print($MyPHPStringVar); ?>"; var MyJSNumVar = <?php Print($MyPHPNumVar); ?>; </script> Конечно, это для простых переменных, а не для объектов.
Вы можете передавать переменные PHP на свой JavaScript, генерируя его с помощью PHP:
<?php $someVar = 1; ?> <script type="text/javascript"> var javaScriptVar = "<?php echo $someVar; ?>"; </script>
Я думаю, что самый простой маршрут – включить javascript-библиотеку jQuery в ваши веб-страницы, а затем использовать JSON в качестве формата для передачи данных между ними.
На ваших страницах HTML вы можете запросить данные из PHP-скриптов следующим образом:
$.getJSON('http://foo/bar.php', {'num1': 12, 'num2': 27}, function(e) { alert('Result from PHP: ' + e.result); });
В bar.php вы можете сделать это:
$num1 = $_GET['num1']; $num2 = $_GET['num2']; echo json_encode(array("result" => $num1 * $num2));
Это то, что обычно называют AJAX, и полезно придать веб-страницам более динамичное и настольное впечатление (вам не нужно обновлять всю страницу, чтобы общаться с PHP).
Другие методы проще. Как и другие, вы можете просто генерировать переменные данных из вашего PHP-скрипта:
$foo = 123; echo "<script type=\"text/javascript\">\n"; echo "var foo = ${foo};\n"; echo "alert('value is:' + foo);\n"; echo "</script>\n";
Большинство веб-страниц в настоящее время используют комбинацию из двух.
Это зависит от того, какой тип переменной PHP вы хотите использовать в Javascript. Например, целые объекты PHP с помощью методов класса не могут использоваться в Javascript. Тем не менее, вы можете использовать встроенные функции PHP JSON (JavaScript Object Notation) для преобразования простых переменных PHP в представления JSON. Для получения дополнительной информации, пожалуйста, прочитайте следующие ссылки:
json_encode json_decode Вы можете создать JSON-представление своей переменной PHP, а затем распечатать ее в своем Javascript-коде при загрузке страницы. Например:
<script type="text/javascript"> var foo = <?php echo json_encode($bar); ?>; </script>
<?php $j=1; ?> <script> var i = "<?php echo $j; ?>"; //Do something </script> <?php echo $j; ?>
Это самый простой способ передать переменную php в javascript без Ajax.
Вы также можете использовать что-то вроде этого:
var i = "<?php echo json_encode($j); ?>";
Это считается более безопасным или безопасным. я думаю
Обновление: я полностью переписал этот ответ. Старый код по-прежнему находится внизу, но я не рекомендую его.
Существует два основных способа доступа к переменным GET :
$_GET PHP (ассоциативный массив). location JavaScript. С PHP вы можете просто создать «шаблон», который выглядит примерно так:
<script type="text/javascript"> var $_GET = JSON.parse("<?php echo json_encode($_GET); ?>"); </script>
Однако, я думаю, что смесь языков здесь неаккуратная, и ее следует избегать там, где это возможно. Я не могу думать о каких-либо серьезных основах для смешивания данных между PHP и JavaScript в любом случае.
Это действительно сводится к следующему:
Поскольку мы говорим о $_GET здесь (или, по крайней мере, я предполагал, что мы были, когда я написал оригинальный ответ), вы должны получить его через JavaScript.
В исходном ответе у меня было два метода для получения строки запроса, но это было слишком грязно и подвержено ошибкам. В настоящее время они лежат в основе этого ответа.
В любом случае, я разработал небольшой «класс» для получения строки запроса (на самом деле конструктор объекта, см. Соответствующий раздел из статьи ООП MDN):
function QuerystringTable(_url){ // private var url = _url, table = {}; function buildTable(){ getQuerystring().split('&').filter(validatePair).map(parsePair); } function parsePair(pair){ var splitPair = pair.split('='), key = decodeURIComponent(splitPair[0]), value = decodeURIComponent(splitPair[1]); table[key] = value; } function validatePair(pair){ var splitPair = pair.split('='); return !!splitPair[0] && !!splitPair[1]; } function validateUrl(){ if(typeof url !== "string"){ throw "QuerystringTable() :: <string url>: expected string, got " + typeof url; } if(url == ""){ throw "QuerystringTable() :: Empty string given for argument <string url>"; } } // public function getKeys(){ return Object.keys(table); } function getQuerystring(){ var string; validateUrl(); string = url.split('?')[1]; if(!string){ string = url; } return string; } function getValue(key){ var match = table[key] || null; if(!match){ return "undefined"; } return match; } buildTable(); this.getKeys = getKeys; this.getQuerystring = getQuerystring; this.getValue = getValue; }
Демо-версия JSFiddle
function main(){ var imaginaryUrl = "http://example.com/webapp/?search=how%20to%20use%20Google&the_answer=42", qs = new QuerystringTable(imaginaryUrl); urlbox.innerHTML = "url: " + imaginaryUrl; logButton( "qs.getKeys()", qs.getKeys() .map(arrowify) .join("\n") ); logButton( 'qs.getValue("search")', qs.getValue("search") .arrowify() ); logButton( 'qs.getValue("the_answer")', qs.getValue("the_answer") .arrowify() ); logButton( "qs.getQuerystring()", qs.getQuerystring() .arrowify() ); } function arrowify(str){ return " -> " + str; } String.prototype.arrowify = function(){ return arrowify(this); } function log(msg){ txt.value += msg + '\n'; txt.scrollTop = txt.scrollHeight; } function logButton(name, output){ var el = document.createElement("button"); el.innerHTML = name; el.onclick = function(){ log(name); log(output); log("- - - -"); } buttonContainer.appendChild(el); } function QuerystringTable(_url){ // private var url = _url, table = {}; function buildTable(){ getQuerystring().split('&').filter(validatePair).map(parsePair); } function parsePair(pair){ var splitPair = pair.split('='), key = decodeURIComponent(splitPair[0]), value = decodeURIComponent(splitPair[1]); table[key] = value; } function validatePair(pair){ var splitPair = pair.split('='); return !!splitPair[0] && !!splitPair[1]; } function validateUrl(){ if(typeof url !== "string"){ throw "QuerystringTable() :: <string url>: expected string, got " + typeof url; } if(url == ""){ throw "QuerystringTable() :: Empty string given for argument <string url>"; } } // public function getKeys(){ return Object.keys(table); } function getQuerystring(){ var string; validateUrl(); string = url.split('?')[1]; if(!string){ string = url; } return string; } function getValue(key){ var match = table[key] || null; if(!match){ return "undefined"; } return match; } buildTable(); this.getKeys = getKeys; this.getQuerystring = getQuerystring; this.getValue = getValue; } main();
#urlbox{ width: 100%; padding: 5px; margin: 10px auto; font: 12px monospace; background: #fff; color: #000; } #txt{ width: 100%; height: 200px; padding: 5px; margin: 10px auto; resize: none; border: none; background: #fff; color: #000; displaY:block; } button{ padding: 5px; margin: 10px; width: 200px; background: #eee; color: #000; border:1px solid #ccc; display: block; } button:hover{ background: #fff; cursor: pointer; }
<p id="urlbox"></p> <textarea id="txt" disabled="true"></textarea> <div id="buttonContainer"></div>