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

你可以在这里阅读更多关于dataset属性的信息:https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset

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

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

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

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

排名不分先后:

使用AJAX从服务器获取所需的数据。 将数据回显到页面的某处，并使用JavaScript从DOM获取信息。 将数据直接回显到JavaScript。

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

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

这种方法被认为是最好的，因为您的服务器端和客户端脚本是完全独立的。

Pros

Better separation between layers - If tomorrow you stop using PHP, and want to move to a servlet, a REST API, or some other service, you don't have to change much of the JavaScript code. More readable - JavaScript is JavaScript, PHP is PHP. Without mixing the two, you get more readable code on both languages. Allows for asynchronous data transfer - Getting the information from PHP might be time/resources expensive. Sometimes you just don't want to wait for the information, load the page, and have the information reach whenever. Data is not directly found on the markup - This means that your markup is kept clean of any additional data, and only JavaScript sees it.

Cons

Latency - AJAX creates an HTTP request, and HTTP requests are carried over network and have network latencies. State - Data fetched via a separate HTTP request won't include any information from the HTTP request that fetched the HTML document. You may need this information (e.g., if the HTML document is generated in response to a form submission) and, if you do, will have to transfer it across somehow. If you have ruled out embedding the data in the page (which you have if you are using this technique) then that limits you to cookies/sessions which may be subject to race conditions.

实现示例

使用AJAX，你需要两个页面，一个是PHP生成输出的页面，另一个是JavaScript获得输出的页面:

get-data.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。

Pros

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

Cons

Potentially Unsemantic Markup - Usually, what happens is that you use some sort of <input type=hidden> to store the information, because it's easier to get the information out of inputNode.value, but doing so means that you have a meaningless element in your HTML. HTML has the <meta> element for data about the document, and HTML 5 introduces data-* attributes for data specifically for reading with JavaScript that can be associated with particular elements. Dirties up the Source - Data that PHP generates is outputted directly to the HTML source, meaning that you get a bigger and less focused HTML source. Harder to get structured data - Structured data will have to be valid HTML, otherwise you'll have to escape and convert strings yourself. Tightly couples PHP to your data logic - Because PHP is used in presentation, you can't separate the two cleanly.

实现示例

因此，我们的想法是创建某种元素，它不会显示给用户，但对JavaScript是可见的。

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

这可能是最容易理解的。

Pros

非常容易实现——它需要非常少的实现和理解。 不会弄脏源代码——变量直接输出到JavaScript，所以DOM不受影响。

Cons

将PHP与数据逻辑紧密结合——因为PHP用于表示，所以不能将两者清晰地分开。

实现示例

实现相对简单:

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

好运！

假设变量总是整数。在这种情况下，这样做更容易:

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

因为abcd在JSON中是“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>

控制台输出

<?php

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

    echo "
        <script>
            myPlugin.start({$val});
        </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>