获取从PHP到JavaScript的变量

我想在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;
}