我有一个变量在PHP,我需要它的值在我的JavaScript代码。我怎么能把我的变量从PHP到JavaScript?

我有这样的代码:

<?php
$val = $myService->getValue(); // Makes an API and database call

在同一页上,我有JavaScript代码,需要$val变量的值作为参数传递:

<script>
    myPlugin.start($val); // I tried this, but it didn't work
    <?php myPlugin.start($val); ?> // This didn't work either
    myPlugin.start(<?=$val?>); // This works sometimes, but sometimes it fails
</script>

当前回答

只需使用以下方法之一。

<script type="text/javascript">
var js_variable  = '<?php echo $php_variable;?>';
<script>

OR

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

其他回答

诀窍是这样的:

下面是使用该变量的“PHP”: <?php $name = 'PHP变量'; 回声的< >脚本; 返回'var name = '。json_encode()美元。';; 回声的> < /脚本; ? > 现在你有了一个名为“name”的JavaScript变量,下面是使用该变量的JavaScript代码: <脚本> console.log(“我无处不在”+名字); > < /脚本

经过大量的研究,我发现最简单的方法是简单地传递各种变量。

在服务器脚本中,你有两个变量,你试图将它们发送到客户端脚本:

$php_var1 ="Hello world";
$php_var2 ="Helloow";
echo '<script>';
echo 'var js_variable1= ' . json_encode($php_var1) . ';';
echo 'var js_variable2= ' . json_encode($php_var2) . ';';
echo '</script>';

在页面上调用的任何JavaScript代码中,只需调用这些变量。

myPlugin.start($val); // Tried this, didn't work

它不起作用,因为就JavaScript而言,$val是未定义的,即PHP代码没有为$val输出任何东西。试着在浏览器中查看源代码,下面是你将看到的:

myPlugin.start(); // I tried this, and it didn't work

And

<?php myPlugin.start($val); ?> // This didn't work either

这并不管用,因为PHP将尝试将myPlugin视为常量,当失败时,它将尝试将其视为字符串'myPlugin',它将尝试与PHP函数start()的输出连接,由于这是未定义的,它将产生一个致命的错误。

And

 myPlugin.start(<?=$val?> // This works sometimes, but sometimes it fails

虽然这是最有可能工作的,因为PHP代码生成了带有预期参数的有效JavaScript,但如果失败,很可能是因为myPlugin还没有准备好。检查你的执行顺序。

您还应该注意到,PHP代码输出是不安全的,应该使用json_encode()进行过滤。

EDIT

因为我没有注意到myPlugin.start(<?=$val?>: \

正如@Second Rikudo指出的那样,要正确工作,$val需要包含右括号,例如:$val="42);"

这意味着PHP现在将生成myPlugin.start(42);并在JavaScript代码执行时按预期工作。

我非常喜欢WordPress使用其enqueue和本地化函数的工作方式,因此遵循这个模型,我编写了一个简单的类,根据脚本依赖关系将脚本放入页面,并为脚本提供额外的数据。

class mHeader {

    private $scripts = array();

    /**
     * @param string $id        Unique script identifier
     * @param string $src      Script src attribute
     * @param array  $deps       An array of dependencies ( script identifiers ).
     * @param array  $data       An array, data that will be json_encoded and available to the script.
     */
    function enqueue_script($id, $src, $deps = array(), $data = array()) {
        $this->scripts[$id] = array('src' => $src, 'deps' => $deps, 'data' => $data);
    }

    private function dependencies($script) {
        if ($script['deps']) {
            return array_map(array($this, 'dependencies'), array_intersect_key($this->scripts, array_flip($script['deps'])));
        }
    }

    private function _unset($key, &$deps, &$out) {
        $out[$key] = $this->scripts[$key];
        unset($deps[$key]);
    }

    private function flattern(&$deps, &$out = array()) {

        foreach($deps as $key => $value) {
            empty($value) ? $this->_unset($key, $deps, $out) : $this->flattern( $deps[$key], $out);
        }
    }

    function print_scripts() {

        if (!$this->scripts)
            return;

        $deps = array_map(array($this, 'dependencies'), $this->scripts);
        while ($deps)
            $this->flattern($deps, $js);

        foreach($js as $key => $script) {
            $script['data'] && printf("<script> var %s = %s; </script>" . PHP_EOL, key($script['data']), json_encode(current( $script['data'])));
            echo "<script id=\"$key-js\" src=\"$script[src]\" type=\"text/javascript\"></script>" . PHP_EOL;
        }
    }
}

对enqueue_script()函数的调用用于添加脚本、设置脚本的源和对其他脚本的依赖关系,以及脚本所需的其他数据。

$header = new mHeader();

$header->enqueue_script('jquery-ui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js', array('jquery'));
$header->enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js');
$header->enqueue_script('custom-script', '//custom-script.min.js', array('jquery-ui'), array('mydata' => array('value' => 20)));

$header->print_scripts();

并且,上面示例的print_scripts()方法将发送以下输出:

<script id="jquery-js" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script id="jquery-ui-js" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
<script> var mydata = {"value":20}; </script>
<script id="custom-script-js" src="//custom-script.min.js" type="text/javascript"></script>

不管脚本'jquery'是在'jquery-ui'之后排队,它是在'jquery-ui'中定义的,它依赖于'jquery',所以它是在'jquery-ui'之前打印的。 额外的数据为'自定义脚本'是在一个新的脚本块,并放在它前面,它包含mydata对象,持有额外的数据,现在可用于'自定义脚本'。

我们可以使用PHP heredoc来实现:

<?php
    
$inPhpVar = "i am php var";

$ScriptInline = <<<JS
<script>
alert('{$inPhpVar} that used in js code');
</script>
JS;

echo $ScriptInline;

?>