gpt4 book ai didi

javascript - 如何将变量和数据从PHP传递到JavaScript?

转载 作者:行者123 更新时间:2023-11-29 21:48:55 29 4
gpt4 key购买 nike

想要改善这篇文章吗?提供此问题的详细答案,包括引文和答案正确的解释。答案不够详细的答案可能会被编辑或删除。
                            
                        
                    
                
                            
                    
我在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>

最佳答案

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

没有特别的顺序:


使用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获取该输出的页面:

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

更多阅读材料


Using XMLHttpRequest - MDN
XMLHttpRequest object reference - MDN
How do I return the response from an asynchronous call?


2.将数据回显到页面中的某个位置,然后使用JavaScript从DOM获取信息。

这种方法不如AJAX更好,但仍具有其优点。从某种意义上说,JavaScript和JavaScript之间没有直接的PHP关系。

优点


快速-DOM操作通常很快,因此您可以相对快速地存储和访问许多数据。


缺点


潜在的非语义标记-通常,发生的事情是您使用某种 <input type=hidden>来存储信息,因为从 inputNode.value中获取信息更容易,但是这样做意味着您在HTML中具有无意义的元素。 HTML具有用于文档数据的 <meta>元素,HTML 5引入了用于特定数据的 data-*属性,这些属性专门用于与可与特定元素相关联的JavaScript读取。
使源代码变脏-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与您的数据逻辑紧密结合-因为在演示中使用了PHP,所以您不能将两者完全分开。


实施实例

实施相对简单:

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


祝好运!

关于javascript - 如何将变量和数据从PHP传递到JavaScript?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33855394/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com