获取从PHP到JavaScript的变量

Question

我想在JavaScript中使用PHP变量.这怎么可能？

Answer 1

您可以在创建页面时将PHP变量打印到javascript中.

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

当然这是针对简单变量而不是对象.

Answer 2

您可以通过PHP生成PHP变量来将PHP变量传递给JavaScript:

<?php
$someVar = 1;
?>

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

Answer 3

我认为最简单的方法是在您的网页中包含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 "<script type=\"text/javascript\">\n";
echo "var foo = ${foo};\n";
echo "alert('value is:' + foo);\n";
echo "</script>\n";

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

Answer 4

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

• PHP JSON手册
• PHP json_encode功能
• PHP json_decode功能

您可以生成PHP变量的JSON表示,然后在页面加载时将其打印到Javascript代码中.例如:

<script type="text/javascript">
  var foo = <?php echo json_encode($bar); ?>;
</script>

Answer 5

<?php 
$j=1;
?>
<script>
var i = "<?php echo $j; ?>";
//Do something
</script>
<?php
echo $j;
?>

这是在没有Ajax的情况下将php变量传递给javascript的最简单方法.

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

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

据说更安全或更安全.我认为

Answer 6

更新:我完全重写了这个答案.旧代码仍在底部,但我不推荐它.

您可以通过两种主要方式获取访问GET变量:

1. 通过PHP的$_GET数组(关联数组).
2. 通过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;
}

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>

它更加强大,不依赖于正则表达式,结合了以前两种方法的最佳部分,并将验证您的输入.你可以给它提供除url之外的查询字符串,如果输入错误,它会大声失败.而且,就像一个好的对象/模块一样,它不知道或关心类定义之外的任何东西,因此它可以与任何东西一起使用.

构造函数自动填充其内部表并解码每个字符串...?foo%3F=bar%20baz&ampersand=this%20thing%3A%20%26,例如,内部将变为:

{
    "foo?"      : "bar baz",
    "ampersand" : "this thing: &"
}

所有工作都是在实例化时为您完成的.

以下是如何使用它:

var qst = new QuerystringTable(location.href);
qst.getKeys()        // returns an array of keys
qst.getValue("foo")  // returns the value of foo, or "undefined" if none.
qst.getQuerystring() // returns the querystring

那好多了.和离开的URL部分由程序员都允许这种情况在非浏览器环境中使用(在测试node.js和a browser),并允许的情况下,您可能希望比较两个不同的查询字符串.

var qs1 = new QuerystringTable(/* url #1 */),
    qs2 = new QuerystringTable(/* url #2 */);

if (qs1.getValue("vid") !== qs2.getValue("vid")){
    // Do something
}

正如我上面所说,这个答案引用了两种凌乱的方法.我把它们留在这里,所以读者不必通过修订历史来寻找它们.他们来了:

1)Direct parse by function.这只是抓取url并使用RegEx直接解析它

$_GET=function(key,def){
    try{
        return RegExp('[?&;]'+key+'=([^?&#;]*)').exec(location.href)[1]
    }catch(e){
        return def||''
    }
}

容易peasy,如果查询字符串是?ducksays=quack&bearsays=growl,那么$_GET('ducksays')应该返回quack并$_GET('bearsays')应该返回growl

现在您可能会立即注意到语法因函数而异.而不是$_GET[key],它是$_GET(key).好吧,我想到了:)

第二种方法是:

2) Object Build by Loop

onload=function(){
    $_GET={}//the lack of 'var' makes this global
    str=location.search.split('&')//not '?', this will be dealt with later
    for(i in str){
        REG=RegExp('([^?&#;]*)=([^?&#;]*)').exec(str[i])
        $_GET[REG[1]]=REG[2]
    }
}

看哪!$ _GET现在是一个对象,包含url中每个对象的索引,所以现在这是可能的:

$_GET['ducksays']//returns 'quack'

这是可能的

for(i in $_GET){
    document.write(i+': '+$_GET[i]+'<hr>')
}

这绝对不是可能的功能.

同样,我不推荐这个旧代码.写的很糟糕.