如何将变量和数据从PHP传递给JavaScript
时间:2017-09-26
我在PHP中有一个变量,我JavaScript代码中需要使用这个值,我如何将我的变量从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获取输出的位置:
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
在文件完成加载时发出警报。
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 -->
祝你好运!
- 【Java学习笔记之十二】Java8增强的工具类:Arrays的用法整理总结
- 利用insert,update和delete注入获取数据
- 【机器学习笔记之二】决策树的python实现
- 【Java学习笔记之十三】初探Java面向对象的过程及代码实现
- 洛谷 P1308 统计单词数【字符串+模拟】
- 【Java学习笔记之十四】Java中this用法小节
- Codeforces 839E Mother of Dragons【__builtin_popcount()的使用】
- 【Java学习笔记之十五】Java中的static关键字解析
- Codeforces 839D Winter is here【数学:容斥原理】
- Codeforces 839C Journey【DFS】
- Facebook的漏洞可以让攻击者在分分钟内重置用户账户密码
- 【Java学习笔记之十七】Java中普通代码块,构造代码块,静态代码块区别及代码示例分析
- 【机器学习笔记之六】Bagging 简述
- 洛谷 P1553 数字反转(升级版)【字符串+STL stack】
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【C++简明教程】Python和C++指定元素排序比较
- 【深度学习】基于web端和C++的两种深度学习模型部署方式
- 作为DBA,你有必要了解一下tcpdump
- Linux用户管理
- 有赞 GO 项目单测、集成、增量覆盖率统计与分析
- RSA--通过模和指数加密模板--无填充
- 有赞发号器多机房方案
- python爬虫以及后端开发--实用加密模板整理
- APP脱壳方法三
- Flink Checkpoint 原理流程以及常见失败原因分析
- Docker原理之 - OverlayFS设计与实现
- 有赞零售跨平台打印库方案
- [Go] Golang练习项目-GO语言实现快速排序-第一个数作为基准更容易理解
- 有赞移动基础设施建设的实践和思考
- 大数据理论篇HDFS的基石——Google File System