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

Posted 2023-02-22

【中文标题】将变量从 PHP 获取到 JavaScript [重复]

【英文标题】：Get variable from PHP to JavaScript [duplicate]

【发布时间】：2010-09-29 18:35:35

【问题描述】：

我想在 javascript 中使用 php 变量。怎么可能？

【问题讨论】：

***.com/questions/392470/… 重复。

***.com/questions/393479/… 也

【参考方案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 Manual PHP json_encode function PHP json_decode function

您可以生成 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 变量：

通过 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。这只是抓取 url 并直接用 RegEx 解析它

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

很简单，如果查询字符串是?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>')

这绝对是不可能函数。

---

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

【讨论】：

请注意，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); ?>";

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