我想在JavaScript中使用PHP变量.这怎么可能?
您可以在创建页面时将PHP变量打印到javascript中.
当然这是针对简单变量而不是对象.
您可以通过PHP生成PHP变量来将PHP变量传递给JavaScript:
我认为最简单的方法是在您的网页中包含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,它有助于为网页提供更加动态和类似桌面的感觉(您无需刷新整个页面以与PHP通信).
其他技术更简单.正如其他人所建议的那样,您只需从PHP脚本生成可变数据:
$foo = 123; echo "\n";
现在大多数网页都使用两者的组合.
这取决于你想在Javascript中使用什么类型的PHP变量.例如,使用类方法的整个PHP对象不能在Javascript中使用.但是,您可以使用内置的PHP JSON(JavaScript Object Notation)函数将简单的PHP变量转换为JSON表示形式.有关更多信息,请阅读以下链接:
PHP JSON手册
PHP json_encode
功能
PHP json_decode
功能
您可以生成PHP变量的JSON表示,然后在页面加载时将其打印到Javascript代码中.例如:
这是在没有Ajax的情况下将php变量传递给javascript的最简单方法.
你也可以使用这样的东西:
var i = "";
据说更安全或更安全.我认为
更新:我完全重写了这个答案.旧代码仍在底部,但我不推荐它.
您可以通过两种主要方式获取访问GET
变量:
通过PHP的$_GET
数组(关联数组).
通过JavaScript的location
对象.
使用PHP,您可以创建一个"模板",如下所示:
但是,我认为这里的语言混合是草率的,应该尽可能避免.无论如何,我无法想到在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() ::: expected string, got " + typeof url; } if(url == ""){ throw "QuerystringTable() :: Empty string given for argument "; } } // 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() :: : expected string, got " + typeof url;
}
if(url == ""){
throw "QuerystringTable() :: Empty string given for argument ";
}
}
// 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;
}