我有一个变量在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>

当前回答

我非常喜欢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_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代码中,只需调用这些变量。

将数据转换为JSON 调用AJAX来接收JSON文件 将JSON转换为Javascript对象

例子:

步骤1

<?php

   $servername = "localhost";
   $username = "";
   $password = "";
   $dbname = "";
   $conn = new mysqli($servername, $username, $password, $dbname);

   if ($conn->connect_error) {
      die("Connection failed: " . $conn->connect_error);
   } 

   $sql = "SELECT id, name, image FROM phone";
   $result = $conn->query($sql);

   while($row = $result->fetch_assoc()){ 
      $v[] = $row;    
   }

  echo json_encode($v);

  $conn->close();
?>

步骤2

function showUser(fnc) {
   var xhttp = new XMLHttpRequest();

   xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         // STEP 3    
         var p = JSON.parse(this.responseText);
      }
   }
}

我假设要传输的数据是一个字符串。

正如其他评论者所述,AJAX是一种可能的解决方案,但缺点大于优点:它有延迟,并且更难编程(它需要代码来检索服务器端和客户端值),而更简单的转义函数应该就足够了。

所以,我们又回到了逃避。如果您首先将源字符串编码为UTF-8, json_encode($string)就可以工作,因为json_encode需要UTF-8数据。如果字符串在ISO-8859-1中,那么您可以简单地使用json_encode(utf8_encode($string));否则,你总是可以先使用iconv来进行转换。

但这里有个大问题。如果你在事件中使用它,你需要在结果上运行htmlspecialchars(),以使它成为正确的代码。然后,您必须小心使用双引号将事件括起来,或者始终将ENT_QUOTES添加到htmlspecialchars中。例如:

<?php
    $myvar = "I'm in \"UTF-8\" encoding and I have <script>script tags</script> & ampersand!";
    // Fails:
    //echo '<body onload="alert(', json_encode($myvar), ');">';
    // Fails:
    //echo "<body onload='alert(", json_encode($myvar), ");'>";
    // Fails:
    //echo "<body onload='alert(", htmlspecialchars(json_encode($myvar)), ");'>";

    // Works:
    //echo "<body onload='alert(", htmlspecialchars(json_encode($myvar), ENT_QUOTES), ");'>";
    // Works:
    echo '<body onload="alert(', htmlspecialchars(json_encode($myvar)), ');">';

    echo "</body>";

然而,你不能在常规JavaScript代码上使用htmlspecialchars(代码包含在<script>…> < /脚本标签)。这使得使用这个函数容易出错,在编写事件代码时忘记htmlspecialchars结果。

可以编写一个不存在该问题的函数,并且可以在事件和常规JavaScript代码中使用,只要始终用单引号或双引号括起事件。以下是我的建议,要求它们在双引号中(我更喜欢这样):

<?php
    // Optionally pass the encoding of the source string, if not UTF-8
    function escapeJSString($string, $encoding = 'UTF-8')
    {
        if ($encoding != 'UTF-8')
            $string = iconv($encoding, 'UTF-8', $string);
        $flags = JSON_HEX_TAG|JSON_HEX_AMP|JSON_HEX_APOS|JSON_HEX_QUOT|JSON_UNESCAPED_SLASHES;
        $string = substr(json_encode($string, $flags), 1, -1);
        return "'$string'";
    }

该函数需要PHP 5.4+。使用示例:

<?php
    $myvar = "I'm in \"UTF-8\" encoding and I have <script>script tags</script> & ampersand!";
    // Note use of double quotes to enclose the event definition!
    echo '<body onload="alert(', escapeJSString($myvar), ');">';
    // Example with regular code:
    echo '<script>alert(', escapeJSString($myvar), ');</script>';
    echo '</body>';

诀窍是这样的:

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

试试这个:

<?php
    echo "<script> var x = " . json_encode($phpVariable) . "</script>";
?>

--

-在尝试了一段时间之后

虽然它可以工作,但是它降低了性能。因为PHP是服务器端脚本,而JavaScript是用户端。