我在PHP中有一个变量，我需要它的值在我的JavaScript代码中。 我怎样才能让我的变量从PHP到JavaScript？

我有这样的代码：

<?php
     ...
     $val = $myService->getValue(); // makes an api and db call
?>

我有需要val JavaScript代码，看起来如下：

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

---

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

没有特别的顺序：

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

将数据回传到某个地方的页面，然后使用JavaScript从DOM获取信息。

将数据直接回传给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获取输出的地方：

得到-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>
    function reqListener () {
      console.log(this.responseText);
    }

    var oReq = new XMLHttpRequest(); //New request object
    oReq.onload = function() {
        //This is where you handle what to do with the response.
        //The actual data is found on this.responseText
        alert(this.responseText); //Will alert: 42
    };
    oReq.open("get", "get-data.php", true);
    //                               ^ Don't block the rest of the execution.
    //                                 Don't wait until the request finishes to 
    //                                 continue.
    oReq.send();
</script>
<!-- snip -->

当文件完成加载时，上述两个文件的组合将提醒42 。

一些更多的阅读材料

使用XMLHttpRequest - MDN

XMLHttpRequest对象引用 - MDN

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

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

这种方法不如AJAX更好，但它仍然有其优点。 在PHP和JavaScript之间仍然相对独立，因为JavaScript中没有直接的PHP。

优点

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

缺点

潜在的非语义标记 - 通常，发生的事情是您使用某种<input type=hidden>来存储信息，因为从inputNode.value获取信息更容易，但这样做意味着您没有任何意义你的HTML。 HTML具有关于文档的数据的<meta>元素，并且HTML 5引入data-*属性专门用于与可以与特定元素关联的JS读取的数据。

使用源代码 - PHP生成的数据直接输出到HTML源代码，这意味着您可以获得更大，更少的HTML源代码。

更难以获得结构化数据 - 结构化数据必须是有效的HTML，否则您必须自行转义和转换字符串。

将PHP紧密结合到您的数据逻辑 - 由于PHP用于演示，因此无法将这两者完全分开。

实施例

有了这个，我们的想法是创建一些不会显示给用户的元素，但对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

这可能是最容易理解的，也是最可怕的。 除非你知道你在做什么，否则不要这样做。

优点

很容易实现 - 实现这一点并且理解起来很少。

不脏源 - 变量直接输出到JavaScript，所以DOM不受影响。

缺点

不安全 - PHP没有简单的JavaScript转义函数，并且它们不是微不足道的实现。 特别是在使用用户输入时，您非常容易受到二级注入的影响。 争议见评论

将PHP紧密结合到您的数据逻辑 - 由于PHP用于演示，因此无法将这两者完全分开。

结构化数据很难 - 你可以做JSON ...有点儿。 但是XML和HTML需要特别关注。

实施例

实现相对简单：

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

祝你好运！

---

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

问题的解释

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

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

然后，将HTML传递给客户端，在完成PHP之后，我想强调一旦代码离开服务器 - PHP已经完成并且无法再访问它。

然后，带JavaScript的HTML到达客户端，它可以在该html上执行JS。

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

初始请求完成后，从客户端发送更多请求。

在初始请求中对服务器必须说的内容进行编码。

解决方案

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

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

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

网站

初始请求完成后，从客户端发送更多请求的速度很慢，因为它需要更多的HTTP请求，这些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.

然后，您可以使用document.cookie使用JavaScript阅读它：

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

var cookies = document.cookie.split(";").
    map(function(el){ return el.split("="); }).
    reduce(function(prev,cur){ prev[cur[0]] = cur[1];return prev },{});

cookies["MyCookie"] // value set with php.

Cookie对于一些数据很有用。 这是跟踪服务经常做的事情。

一旦我们有更多的数据，我们可以用JSON在JS变量中编码它：

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

假设$value是PHP端的json_encode （通常是）。 这种技术就是StackOverflow在聊天时所做的事情（只使用.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 db call
 echo json_encode($val); // write it to the output
 $>

这样，我们的JS文件要求输入数据并显示它，而不是要求代码或布局。 这是更清洁，并随着应用程序变得更高而开始回报。 这也是更好的问题分离，它允许在不涉及任何服务器端技术的情况下测试客户端代码，这是另一个优点。

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

---

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

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

</div>

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

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

这个例子使用jQuery，但可以适用于其他库或香草JavaScript。

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

链接地址: http://www.djcxy.com/p/23651.html

上一篇: How to pass variables and data from PHP to JavaScript?

下一篇: Get object name of a class from the user in Java