从PHP到JavaScript获取variables

我想在JavaScript中使用PHPvariables。 这怎么可能?

您可以在创build页面时将PHPvariables打印到JavaScript中。

<script type="text/javascript"> var MyJSStringVar = "<?php Print($MyPHPStringVar); ?>"; var MyJSNumVar = <?php Print($MyPHPNumVar); ?>; </script> 

当然这是为了简单的variables而不是对象。

您可以通过使用PHP生成PHPvariables到您的JavaScript:

 <?php $someVar = 1; ?> <script type="text/javascript"> var javaScriptVar = "<?php echo $someVar; ?>"; </script> 

我认为最简单的方法是在您的网页中包含jQuery JavaScript库,然后使用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,为网页提供更加dynamic和类似于桌面的感觉(您不必刷新整个页面以便与PHP通信)。

其他技术更简单。 正如其他人所build议的,您可以简单地从您的PHP脚本生成可变数据:

 $foo = 123; echo "<script type=\"text/javascript\">\n"; echo "var foo = ${foo};\n"; echo "alert('value is:' + foo);\n"; echo "</script>\n"; 

现在大多数网页都使用这两者的组合。

这取决于你想在Javascript中使用什么types的PHPvariables。 例如,使用类方法的整个PHP对象不能在Javascript中使用。 但是,您可以使用内置的PHP JSON (JavaScript Object Notation)函数将简单的PHPvariables转换为JSON表示forms。 欲了解更多信息,请阅读以下链接:

  • PHP的JSON手册
  • PHP的json_encode函数
  • PHP的json_decode函数

您可以生成PHPvariables的JSON表示,然后在页面加载时将其打印到您的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; ?> 

这是在没有Ajax的情况下将一个phpvariables传递给javascript的最简单的方法。

你也可以使用这样的东西:

 var i = "<?php echo json_encode($j); ?>"; 

这说来更安全或更安全。 我认为

更新:我完全重写了这个答案。 旧的代码仍然在那里,但我不推荐它。


有两种主要的方法可以访问GETvariables:

  1. 通过PHP的$_GET数组(关联数组)。
  2. 通过JavaScript的location对象。

使用PHP,你可以创build一个“模板”,就像这样:

 <script type="text/javascript"> var $_GET = JSON.parse("<?php echo json_encode($_GET); ?>"); </script> 

不过,我认为这里的语言混合是sl,的,应尽可能避免。 无论如何,我无法想到在PHP和JavaScript之间混合使用数据的好处。

这真的归结为:

  • 如果数据可以通过JavaScript获取,请使用JavaScript。
  • 如果数据不能通过JavaScript获得,请使用AJAX。
  • 如果您另外需要与服务器通信,请使用AJAX。

因为我们在这里讨论$_GET (或者至less我假设我们是在写原始答案的时候),所以你应该通过JavaScript来获取它。

在原来的答案中,我有两个获取查询string的方法,但它太乱,容易出错。 那些现在在这个答案的底部。

无论如何,我devise了一个很好的“类”来获取查询string(实际上是一个对象构造函数,请参阅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; } 

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>