php 传递数据给js,如何将变量和数据从PHP传递给JavaScript?

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

没有特别的顺序:使用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(或任何实际页面命名为)

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

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

更多阅读材料

2.将数据回显到某个页面,并使用JavaScript从DOM获取信息

这种方法不如AJAX优选,但它仍然有其优点。从某种意义上说,PHP和JavaScript之间仍然存在相对分离,即JavaScript中没有PHP。

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

缺点潜在的非语义标记 - 通常情况下,您使用某种方式来存储信息,因为它更容易从中获取信息inputNode.value,但这样做意味着您在HTML中有一个无意义的元素。HTML具有关于文档的数据的元素,HTML 5引入data-*了专门用于与JS一起阅读的数据的属性,可以与特定元素相关联。

Dirties up the Source - PHP生成的数据直接输出到HTML源代码,这意味着您将获得更大,更少关注的HTML源代码。

获取结构化数据更难 - 结构化数据必须是有效的HTML,否则您必须自己转义并转换字符串。

将PHP与数据逻辑紧密结合 - 因为PHP在演示中使用,所以不能干净地将两者分开。

实施例

有了这个,我们的想法是创建一些不会向用户显示但是对JavaScript可见的元素。

的index.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. */

?>

var div = document.getElementById("dom-target");

var myData = div.textContent;

3.将数据直接回显给JavaScript

这可能是最容易理解的,也是最恐怖的。除非你知道自己在做什么,否则不要这样做。

优点非常容易实现 - 实现这一点并理解它只需要很少。

不脏源 - 变量直接输出到JavaScript,因此DOM不受影响。

缺点不安全 - PHP没有简单的JavaScript转义函数,它们实现起来并不容易。特别是在使用用户输入时,您极易受到第二层注入的影响。争议见评论

将PHP与数据逻辑紧密结合 - 因为PHP在演示中使用,所以不能干净地将两者分开。

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

实施例

实施相对简单:

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

祝好运!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值