Я хочу использовать переменную PHP в JavaScript. Как это возможно?
Получить переменную от PHP до JavaScript
Ответ 1
Вы можете напечатать переменную PHP в своем javascript, пока ваша страница создана.
<script type="text/javascript">
var MyJSStringVar = "<?php Print($MyPHPStringVar); ?>";
var MyJSNumVar = <?php Print($MyPHPNumVar); ?>;
</script>
Конечно, это для простых переменных, а не для объектов.
Ответ 2
Вы можете передать переменные PHP на свой JavaScript, создав его с помощью PHP:
<?php
$someVar = 1;
?>
<script type="text/javascript">
var javaScriptVar = "<?php echo $someVar; ?>";
</script>
Ответ 3
Я думаю, что самый простой маршрут - включить 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 script:
$foo = 123;
echo "<script type=\"text/javascript\">\n";
echo "var foo = ${foo};\n";
echo "alert('value is:' + foo);\n";
echo "</script>\n";
Большинство веб-страниц в настоящее время используют комбинацию из двух.
Ответ 4
Это зависит от того, какой тип переменной PHP вы хотите использовать в Javascript. Например, целые объекты PHP с помощью методов класса не могут использоваться в Javascript. Тем не менее, вы можете использовать встроенные функции PHP JSON (JavaScript Object Notation) для преобразования простых PHP-переменных в представления JSON. Для получения дополнительной информации ознакомьтесь со следующими ссылками:
Вы можете создать JSON-представление своей переменной PHP, а затем распечатать ее в своем Javascript-коде при загрузке страницы. Например:
<script type="text/javascript">
var foo = <?php echo json_encode($bar); ?>;
</script>
Ответ 5
<?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); ?>";
Это считается более безопасным или безопасным. я думаю
Ответ 6
Обновление: я полностью переписал этот ответ. Старый код по-прежнему находится внизу, но я не рекомендую его.
Существует два основных способа доступа к переменным GET:
- Через массив PHP
$_GET(ассоциативный массив). - Через объект JavaScript
location.
С PHP вы можете просто создать "шаблон", который выглядит примерно так:
<script type="text/javascript">
var $_GET = JSON.parse("<?php echo json_encode($_GET); ?>");
</script>
Однако, я думаю, что смесь языков здесь неаккуратная, и ее следует избегать там, где это возможно. Я не могу думать о каких-либо серьезных причинах для смешивания данных между PHP и JavaScript в любом случае.
Это действительно сводится к следующему:
- Если данные могут быть получены с помощью JavaScript, используйте JavaScript.
- Если данные не могут быть получены с помощью JavaScript, используйте AJAX.
- Если вам нужно общаться с сервером, используйте AJAX.
Так как мы говорим о $_GET здесь (или, по крайней мере, я предполагал, что когда мы писали исходный ответ), вы должны получить его через JavaScript.
В исходном ответе у меня было два метода для получения строки запроса, но это было слишком грязно и подвержено ошибкам. Теперь они находятся в нижней части этого ответа.
В любом случае, я разработал небольшой "класс" для получения строки запроса (на самом деле конструктор объекта, см. соответствующий раздел из MDN OOP статья):
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;
}
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>