问题描述：

我在 PHP 中有一个变量，我需要在 JavaScript 代码中使用该变量的值。如何将变量从 PHP 传输到 JavaScript？

我有如下代码：

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

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

<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>

解决方案 1：

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

不分先后顺序：

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

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

1. 将数据回显到页面的某个位置，并使用 JavaScript 从 DOM 获取信息

这种方法不如 AJAX 好，但仍然有其优势。PHP 和 JavaScript 之间仍然相对分离，因为 JavaScript 中没有直接的 PHP。

优点

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

缺点

• 潜在的非语义标记- 通常，您使用某种<input type=hidden>来存储信息，因为这样更容易从 中获取信息inputNode.value，但这样做意味着您的 HTML 中有一个无意义的元素。HTML 具有用于<meta>文档数据的元素，而 HTML 5 引入了data-*专门用于使用 JavaScript 读取的数据属性，这些属性可以与特定元素相关联。

• 弄脏源代码- 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 -->

1. 将数据直接回显到 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 -->

祝你好运！

解决方案 2：

我通常在 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

解决方案 3：

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

问题解释

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

• 首先运行 PHP，它会生成提供给客户端的 HTML。

• 然后，当 HTML 被传送到客户端时，PHP 就“死亡”了（即它实际上停止运行）。我想强调的是，一旦代码离开服务器，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 端$value是json_encode可行的（通常可以）。例如，Stack Overflow 在其聊天中采用了这种技术（仅使用 .NET 而不是 PHP）。

应用

如果您正在编写应用程序 - 突然间初始加载时间并不总是像应用程序的持续性能那么重要，并且分别加载数据和代码开始有所回报。

我的回答在这里解释了如何在 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 文章、这篇文章和这个问题。

解决方案 4：

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

json_encode() 需要：

• PHP 5.2.0 或更高版本

• $PHPVar编码为UTF-8，Unicode。

解决方案 5：

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

<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>

解决方案 6：

尝试一下：

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

--

-尝试了一段时间后

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

解决方案 7：

我非常喜欢 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”的附加数据位于新脚本块内，并放置在其前面，它包含mydata保存附加数据的对象，现在可供“custom-script”使用。

解决方案 8：

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);
      }
   }
}

解决方案 9：

我已经想出了一种使用 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");
}

解决方案 10：

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

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

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

和

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

这是行不通的，因为 PHP 会尝试将其视为myPlugin一个常量，而当失败时，它会尝试将其视为字符串'myPlugin'，并尝试将其与 PHP 函数的输出连接起来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 现在将会生成myPlugin.start(42);并在由 JavaScript 代码执行时按预期工作。

解决方案 11：

诀窍如下：

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

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

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

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

解决方案 12：

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

<?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_encode字符串编码为 JSON 对象的函数调用。

<?PHP
    $number = 'abcd';

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

由于abcdJSON 是"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>

控制台输出

解决方案 13：

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

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

因此，我们回到转义。如果您首先将源字符串编码为 UTF-8（如果尚未编码），则json_encode($string)有效，因为需要 UTF-8 数据。如果字符串采用 ISO-8859-1，则只需使用；否则，您始终可以先使用进行转换。json_encode`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>";

但是，您不能htmlspecialchars在常规 JavaScript 代码（包含在<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>';

解决方案 14：

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

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

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

解决方案 15：

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'] + ".");

输出

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

解决方案 16：

这是 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)

这完全满足了我的需求，我希望它也能为你服务。

解决方案 17：

我不知道其他解决方案，但如果你的数据不包含任何敏感信息，那么你可以用这种方式使用它

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>

请记住，如果您使用此方法，那么用户可以从检查（开发者）模式中看到变量值，甚至可以修改它！

解决方案 18：

<?php

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

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

?>

解决方案 19：

我们可以使用 php heredoc来实现：

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

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

echo $ScriptInline;

?>

解决方案 20：

根据您的代码

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

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

您的页面将使用 PHP 打印它，并且您的 JavaScript 将使用 DOM 获取值。