将变量从 PHP 获取到 JavaScript [重复]

【问题标题】：Get variable from PHP to JavaScript [duplicate]将变量从 PHP 获取到 JavaScript [重复]
【发布时间】：2010-09-29 18:35:35
【问题描述】：

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

【问题讨论】：

标签： php javascript


【解决方案1】：

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

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

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

【讨论】：

  • 你可能想要做一些健全性检查，在输出它们之前确保 PHP 变量是你想要的，否则你会遇到一些奇怪的 Javascript 错误。另外不要忘记清理，确保变量不包含“，您需要对其进行HTMLEncode或使用JSON。
【解决方案2】：

您可以通过使用 PHP 生成 PHP 变量来将其传递给您的 JavaScript：

<?php
$someVar = 1;
?>

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

【讨论】：

  • 完全符合我的需要。谢谢卡斯滕！
  • 经过几个小时的搜索解决了我的问题 - 谢谢！
  • 听起来很好很简单，但在我的情况下 alert 或 consoleLog 的结果是这样的： 而不是变量的值 :-(
  • @Garavani 听起来你的服务器上可能没有安装 PHP？
【解决方案3】：

这取决于您想在 Javascript 中使用哪种类型的 PHP 变量。例如，具有类方法的整个 PHP 对象不能在 Javascript 中使用。但是，您可以使用内置的 PHP JSON（JavaScript 对象表示法）函数将简单的 PHP 变量转换为 JSON 表示。欲了解更多信息，请阅读以下链接：

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

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

【讨论】：

    【解决方案4】：

    我认为最简单的方法是在您的网页中包含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";

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

    【讨论】：

    • 我想你只是把他弄糊涂了。我认为他没想到会有这么复杂的事情。
    • 是的，我明白你的意思了——也许他可以试着解释更多他想要什么。
    • 我不确定包括整个库以使用 JSON 函数是最好的方法。对于该特定任务，jQuery 有很多替代品。
    • 你是对的。一个只包装 xml-http 谈话的轻量级库会很整洁。
    【解决方案5】：

    更新：我完全重写了这个答案。旧代码还在，在底部，但我不推荐它。

    您可以通过两种主要方式访问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 文章中的 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&amp;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||''
    }
}

    很简单，如果查询字符串是?ducksays=quack&amp;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>')
}

    这绝对是不可能函数。

    同样，我不推荐这种旧代码。写的不好。

    【讨论】：

    • 请注意，onload 不是required，但它只是为了防止任何可能的涉及长时间加载的故障。
    • 那个演示可能是我做过的最精彩的 jsfiddle 演示之一。
    【解决方案6】： 
    <?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); ?>";

    据说这更安全或更安全。我觉得

    【讨论】：

      猜你喜欢
      • 2013-03-06
      • 1970-01-01
      • 1970-01-01
      • 2015-05-11
      • 1970-01-01
      • 2023-04-08
      • 2012-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode