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表示，然后在页面加载时将其打印到您的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变量：

通过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文章中的the relevant section）：

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 demo

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。这只是抓取网址并使用RegEx直接解析它
$_GET=function(key,def){
    try{
        return RegExp('[?&;]'+key+'=([^?&#;]*)').exec(location.href)[1]
    }catch(e){
        return def||''
    }
}
如果查询字符串为?ducksays=quack&bearsays=growl，那么{p <1}}应该返回$_GET('ducksays')而quack应该返回$_GET('bearsays')

现在您可能会立即注意到语法因函数而异。而不是growl，而是$_GET[key]。好吧，我想到了这一点：）

这是第二种方法：


2）$_GET(key)
Object Build by Loop
看哪！ $ _GET现在是一个包含url中每个对象索引的对象，所以现在可以这样做：
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['ducksays']//returns 'quack'
使用该功能肯定不。

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

获取从PHP到JavaScript的变量

6 个答案: