实际上有几种方法可以做到这一点。有些比其他的需要更多的开销，有些被认为比其他的更好。

排名不分先后：

1. 使用 AJAX 从服务器获取所需的数据。
2. 将数据回显到页面的某个位置，并使用 JavaScript 从 DOM 中获取信息。
3. 将数据直接回显到 JavaScript。

在这篇文章中，我们将研究上述每种方法，看看每种方法的优缺点，以及如何实现它们。

1. 使用 AJAX 从服务器获取所需的数据

此方法被认为是最好的，因为服务器端和客户端脚本是完全分开的。

优点

• 层与层之间更好的分离 - 如果明天你停止使用 PHP，并希望迁移到 servlet、REST API 或其他一些服务，你不必更改太多 JavaScript 代码。
• 更具可读性 - JavaScript 是 JavaScript，PHP 是 PHP。在不混合使用这两种语言的情况下，您可以在两种语言上获得更具可读性的代码。
• 允许异步数据传输 - 从 PHP 获取信息可能会耗费大量时间/资源。有时你只是不想等待信息，加载页面，并让信息随时到达。
• 在标记上找不到数据 - 这意味着您的标记没有任何其他数据，只有 JavaScript 才能看到它。

缺点

• 延迟 - AJAX 创建 HTTP 请求，HTTP 请求通过网络传输，并具有网络延迟。
• 状态 - 通过单独的 HTTP 请求提取的数据将不包含提取 HTML 文档的 HTTP 请求中的任何信息。您可能需要此信息（例如，如果 HTML 文档是为响应表单提交而生成的），并且，如果您这样做，则必须以某种方式传输它。如果您已经排除了在页面中嵌入数据的可能性（如果您使用此技术，则可以嵌入数据），那么这将限制您访问可能受竞争条件约束的 cookie/会话。

实现实例

使用 AJAX，您需要两个页面，一个是 PHP 生成输出的位置，第二个是 JavaScript 获取该输出的位置：

获取数据.php

/* Do some operation here, like talk to the database, the file-session
 * The world beyond, limbo, the city of shimmers, and Canada.
 *
 * AJAX generally uses strings, but you can output JSON, HTML and XML as well.
 * It all depends on the Content-type header that you send with your AJAX
 * request. */

echo json_encode(42); // In the end, you need to `echo` the result.
                      // All data should be `json_encode`-d.

                      // You can `json_encode` any value in PHP, arrays, strings,
                      // even objects.

index.php（或任何实际页面的名称）

<!-- snip -->
<script>
    fetch("get-data.php")
        .then((response) => {
            if(!response.ok){ // Before parsing (i.e. decoding) the JSON data,
                              // check for any errors.
                // In case of an error, throw.
                throw new Error("Something went wrong!");
            }

            return response.json(); // Parse the JSON data.
        })
        .then((data) => {
             // This is where you handle what to do with the response.
             alert(data); // Will alert: 42
        })
        .catch((error) => {
             // This is where you handle errors.
        });
</script>
<!-- snip -->

当文件完成加载时，上述两个文件的组合将发出警报。42

更多阅读材料

• 使用 Fetch API
• 如何返回异步调用的响应？

2. 将数据回显到页面的某个地方，并使用 JavaScript 从 DOM 中获取信息

这种方法不如 AJAX 可取，但它仍然有其优点。从某种意义上说，PHP 和 JavaScript 之间仍然相对分开，因为 JavaScript 中没有直接的 PHP。

优点

• 快速 - DOM 操作通常很快，您可以相对快速地存储和访问大量数据。

缺点

• 潜在的非语义标记 - 通常，发生的事情是你使用某种方式来存储信息，因为更容易从中获取信息，但这样做意味着你的 HTML 中有一个无意义的元素。HTML 具有有关文档的数据的元素，而 HTML 5 引入了专门用于使用 JavaScript 读取的数据属性，这些属性可以与特定元素相关联。<input type=hidden>inputNode.value<meta>data-*
• 弄脏源码 - PHP 生成的数据直接输出到 HTML 源码，这意味着你会得到一个更大、更不集中的 HTML 源码。
• 更难获取结构化数据 - 结构化数据必须是有效的 HTML，否则您必须自己转义和转换字符串。
• 将 PHP 与数据逻辑紧密耦合 - 因为 PHP 用于演示，所以无法将两者完全分开。

实现实例

有了这个，我们的想法是创建某种元素，这些元素不会显示给用户，但对 JavaScript 可见。

索引.php

<!-- snip -->
<div id="dom-target" style="display: none;">
    <?php
        $output = "42"; // Again, do some operation, get the output.
        echo htmlspecialchars($output); /* You have to escape because the result
                                           will not be valid HTML otherwise. */
    ?>
</div>
<script>
    var div = document.getElementById("dom-target");
    var myData = div.textContent;
</script>
<!-- snip -->

3. 将数据直接回显到 JavaScript

这可能是最容易理解的。

优点

• 非常容易实现 - 实现这一点并理解它只需要很少的时间。
• 不脏源 - 变量直接输出到 JavaScript，因此 DOM 不受影响。

缺点

• 将 PHP 与数据逻辑紧密耦合 - 因为 PHP 用于演示，所以无法将两者完全分开。

实现实例

实现相对简单：

<!-- snip -->
<script>
    var data = <?php echo json_encode("42", JSON_HEX_TAG); ?>; // Don't forget the extra semicolon!
</script>
<!-- snip -->

祝你好运！

我将尝试一个更简单的答案：

问题解释

首先，让我们了解从我们的服务器提供页面时的事件流：

• 首先运行 PHP，它生成提供给客户端的 HTML。
• 然后，PHP 在将 HTML 交付给客户端时“死亡”（即它实际上停止运行）。我想强调的是，一旦代码离开服务器，PHP就不再是页面加载的一部分，服务器也不再有权访问它。
• 然后，当带有 JavaScript 的 HTML 到达客户端时，客户端可以在该 HTML 上执行 JavaScript，前提是它是有效的 Javascript。

所以说真的，这里要记住的核心是HTTP是无状态的。一旦请求离开服务器，服务器就无法触及它。因此，我们的选择是：

1. 初始请求完成后，从客户端发送更多请求。
2. 对服务器在初始请求中必须说的内容进行编码。

解决 方案

这是你应该问自己的核心问题是：

我是在写一个网站还是一个应用程序？

网站主要是基于页面的，页面加载时间需要尽可能快（例如 - 维基百科）。Web 应用程序对 AJAX 的依赖程度更高，并且会执行大量往返操作来快速获取客户端信息（例如，股票仪表板）。

网站

在初始请求完成后，从客户端发送更多请求的速度很慢，因为它需要更多的 HTTP 请求，这些请求会产生大量开销。此外，它需要异步性，因为发出 AJAX 请求需要处理程序来处理它何时完成。

我不建议再次提出请求，除非您的网站是从服务器获取该信息的应用程序。

您需要快速的响应时间，这会对转换和加载时间产生巨大影响。在这种情况下，发出 Ajax 请求对于初始正常运行时间来说很慢，并且是不必要的。

您有两种方法可以解决这个问题

• 设置 cookie - cookie 是在 HTTP 请求中发送的标头，服务器和客户端都可以读取。
• 将变量编码为 JSON - JSON 看起来非常接近 JavaScript 对象，并且大多数 JSON 对象都是有效的 JavaScript 变量。

设置cookie真的不是很困难，你只需给它分配一个值：

setcookie("MyCookie", $value); // Sets the cookie to the value, remember, do not
                               // Set it with HTTP only to true.

然后，您可以使用以下命令使用 JavaScript 读取它：document.cookie

这是一个简短的手动滚动解析器，但我链接到的答案有更好的测试：

var cookies = document.cookie.split(";").
    map(function(el){ return el.split("="); }).
    reduce(function(prev,cur){ prev[cur[0]] = cur[1]; return prev },{});
alert(cookies["MyCookie"]); // Value set with PHP.

Cookie 对一些数据有好处。这就是跟踪服务经常做的事情。

一旦我们有了更多数据，我们就可以在 JavaScript 变量中使用 JSON 对其进行编码：

<script>
    var myServerData = <?=json_encode($value)?>; // Don't forget to sanitize
                                                 //server data
</script>

假设在PHP端是可以的（通常是）。例如，这种技术是 Stack Overflow 在其聊天中所做的（仅使用 .NET 而不是 PHP）。$valuejson_encode

应用

如果你正在编写一个应用程序，那么突然间，初始加载时间并不总是像应用程序的持续性能那样重要，并且开始单独加载数据和代码。

我的答案解释了如何在 JavaScript 中使用 AJAX 加载数据：

function callback(data){
    // What do I do with the response?
}

var httpRequest = new XMLHttpRequest;
httpRequest.onreadystatechange = function(){
    if (httpRequest.readyState === 4) { // Request is done
        if (httpRequest.status === 200) { // successfully
            callback(httpRequest.responseText); // We're calling our method
        }
    }
};
httpRequest.open('GET', "/echo/json");
httpRequest.send();

或者使用 jQuery：

$.get("/your/url").done(function(data){
    // What do I do with the data?
});

现在，服务器只需要包含一个路由/文件，其中包含抓取数据并对其执行某些操作的代码，在您的示例中：/your/url

<?php
$val = myService->getValue(); // Makes an API and database call
header("Content-Type: application/json"); // Advise client of response type
echo json_encode($val); // Write it to the output

这样，我们的 JavaScript 文件会请求数据并显示它，而不是要求代码或布局。这更干净，并且随着应用程序的增加而开始得到回报。它还可以更好地分离关注点，并且允许在不涉及任何服务器端技术的情况下测试客户端代码，这是另一个优点。

附言：当您将任何内容从 PHP 注入 JavaScript 时，您必须非常了解 XSS 攻击向量。很难正确转义值，并且对上下文敏感。如果您不确定如何处理 XSS，或者不知道它 - 请阅读这篇 OWASP 文章、这篇文章和这个问题。

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

它不起作用，因为就 JavaScript 而言是未定义的，即 PHP 代码没有输出任何内容。尝试在浏览器中查看源代码，您将看到以下内容：$val$val

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

和

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

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

和

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

虽然这最有可能奏效，但由于 PHP 代码正在生成具有预期参数的有效 JavaScript，如果它失败了，很可能是因为还没有准备好。检查您的执行顺序。myPlugin

另外，您应该注意 PHP 代码输出是不安全的，应该用 .json_encode()

编辑

因为我没有注意到：-\中缺少括号myPlugin.start(<?=$val?>

正如 @Second Rikudo 指出的那样，要使其正常工作，需要包含右括号，例如：$val$val="42);"

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

我通常在 HTML 中使用 data-* 属性。

<div
    class="service-container"
    data-service="<?= htmlspecialchars($myService->getValue()) ?>"
>

</div>

<script>
    $(document).ready(function() {
        $('.service-container').each(function() {
            var container = $(this);
            var service = container.data('service');

            // Var "service" now contains the value of $myService->getValue();
        });
    });
</script>

此示例使用 jQuery，但它可以适用于其他库或普通 JavaScript。

您可以在此处阅读有关数据集属性的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset

<script>
  var jsvar = <?php echo json_encode($PHPVar); ?>;
</script>

json_encode（） 要求：

• PHP 5.2.0 或更高版本
• $PHPVar编码为 UTF-8、Unicode。

试试这个：

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

--

-尝试了一段时间后

虽然它有效，但它会降低性能。因为 PHP 是服务器端脚本，而 JavaScript 是用户端。

我非常喜欢 WordPress 使用其排队和本地化函数的方式，因此按照该模型，我编写了一个简单的类，用于根据脚本依赖关系将脚本放入页面，并为脚本提供其他数据。

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-ui”中定义，它依赖于“jquery”。 “custom-script”的附加数据位于一个新的脚本块中，并放置在其前面，它包含保存其他数据的对象，现在可用于“custom-script”。mydata

我提出了一种使用 PHP 分配 JavaScript 变量的简单方法。

它使用 HTML5 数据属性来存储 PHP 变量，然后在页面加载时将其分配给 JavaScript。

例：

<?php
    $variable_1 = "QNimate";
    $variable_2 = "QScutter";
?>
    <span id="storage" data-variable-one="<?php echo $variable_1; ?>" data-variable-two="<?php echo $variable_2; ?>"></span>
<?php

下面是 JavaScript 代码

var variable_1 = undefined;
var variable_2 = undefined;

window.onload = function(){
    variable_1 = document.getElementById("storage").getAttribute("data-variable-one");
    variable_2 = document.getElementById("storage").getAttribute("data-variable-two");
}

只需使用以下方法之一即可。

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

或

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

根据您的代码

<$php
     $val = $myService->getValue(); // Makes an API and database call
     echo '<span id="value">'.$val.'</span>';
$>

现在你可以使用 DOM 获取值，使用 span id 的 innerHTML，在这种情况下，你不需要对 server 或 Ajax 或其他东西进行任何调用。

你的页面将使用 PHP 打印它，而你的 JavaScript 将使用 DOM 获得价值。

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

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

所以，我们又回到了逃避。 如果先将源字符串编码为 UTF-8，则有效，因为它需要 UTF-8 数据。如果字符串在 ISO-8859-1 中，那么您可以简单地使用 ;否则，您可以随时使用先进行转换。json_encode($string)json_encodejson_encode(utf8_encode($string))iconv

但有一个很大的问题。如果在事件中使用它，则需要对结果运行，以使其代码正确。然后，您必须小心使用双引号将事件括起来，或者始终添加到 htmlspecialchars。例如：htmlspecialchars()ENT_QUOTES

<?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></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>';

这是诀窍：

1. 这是使用该变量的“PHP”：

   <?php
       $name = 'PHP variable';
       echo '<script>';
       echo 'var name = ' . json_encode($name) . ';';
       echo '</script>';
   ?>
   

2. 现在，您有一个名为 的 JavaScript 变量，下面是使用该变量的 JavaScript 代码：'name'

   <script>
        console.log("I am everywhere " + name);
   </script>
   

假设您的变量始终是整数。在这种情况下，这更容易：

<?PHP
    $number = 4;

    echo '<script>';
    echo 'var number = ' . $number . ';';
    echo 'alert(number);';
    echo '</script>';
?>

输出：

<script>var number = 4;alert(number);</script>

假设你的变量不是一个整数，但如果你尝试上面的方法，你会得到这样的结果：

<script>var number = abcd;alert(number);</script>

但在 JavaScript 中，这是一个语法错误。

因此，在 PHP 中，我们有一个函数调用，将字符串编码为 JSON 对象。json_encode

<?PHP
    $number = 'abcd';

    echo '<script>';
    echo 'var number = ' . json_encode($number) . ';';
    echo 'alert(number);';
    echo '</script>';
?>

由于在 JSON 中是 ，它看起来像这样：abcd"abcd"

<script>var number = "abcd";alert(number);</script>

您可以对数组使用相同的方法：

<?PHP
    $details = [
    'name' => 'supun',
    'age' => 456,
    'weight' => '55'
    ];

    echo '<script>';
    echo 'var details = ' . json_encode($details) . ';';
    echo 'alert(details);';
    echo 'console.log(details);';
    echo '</script>';
?>

您的 JavaScript 代码如下所示：

<script>var details = {"name":"supun","age":456,"weight":"55"};alert(details);console.log(details);</script>

控制台输出

1. 将数据转换为 JSON
2. 调用 AJAX 接收 JSON 文件
3. 把 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);
      }
   }
}

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

在服务器脚本中，您有两个变量，并且您正在尝试将它们发送到客户端脚本：

$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 代码中，只需调用这些变量即可。

<?php

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

    echo "
        <script>
            myPlugin.start({$val});
        </script> ";

?>

PHP的

$fruits = array("apple" => "yellow", "strawberry" => "red", "kiwi" => "green");
<script>
    var color = <?php echo json_encode($fruits) ?>;
</script>
<script src="../yourexternal.js"></script>

JS （yourexternal.js）

alert("The apple color is" + color['apple'] + ", the strawberry color is " + color['strawberry'] + " and the kiwi color is " + color['kiwi'] + ".");

输出

苹果色为黄色，草莓色为红色，猕猴桃色为红色 颜色为绿色。

我们可以使用 php heredoc 来做到这一点：

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

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

echo $ScriptInline;

?>

这就是 2022 年对我有用的方法，我使用此解决方案来获取当前用户的电子邮件

我使用 PHP 创建了一个简码并将其添加到 PHP .function 中：

function my_get_current_user_email(){
    $current_user = wp_get_current_user();
    $email = $current_user->user_email;
    return $email;  
} 
add_shortcode( 'get_email', 'my_get_current_user_email');

然后使用 div 包装短代码：

 <div id="target-content" style="display: none;">
[get_email]
 </div>

最后，使用 JavaScript 访问 Div 的内容：

const databox = document.getElementById("target-content");
const dataContent = databox.textContent;
console.log(dataContent)

这非常适合我想要的东西，我希望它也适合你。

我对其他解决方案没有太多想法，但如果您的数据不包含任何敏感信息，那么您可以以这种方式使用它

1. 将数据导入 HTML 标记并为其指定 ID
2. 将标签可见性设置为隐藏，并将数据提取到 Javascript

这是我如何使用它

1.

<p id="YourID"> <?php echo $variableName ?> </p>

<script>
   document.getElementById("YourID").style.visibility = "hidden";
   let VariableName = document.getElementById("YourID").textContent;
</script>

请记住，如果您使用此方法，那么用户可以从 inspect（Devloper） 模式中看到变量值，他们甚至可以修改它！