PHP基础教程（114）PHP与JavaScript交互之在PHP中调用JavaScript脚本：PHP“撩”JS：这对儿Web开发黄金搭档如何“眉来眼去”-优快云博客

用户点击提交按钮，浏览器前的他盯着加载图标，而屏幕背后，PHP和JavaScript这对儿各司其职的搭档正上演着一场默契十足的数据交接。

01 异域搭档，数据“情书”

理解PHP和JavaScript之间的关系，是掌握它们交互方式的关键。PHP工作在服务器端，负责处理数据、与数据库交互等“后台”任务。而JavaScript则运行在用户的浏览器中，主要负责网页元素的交互和动态效果。

这对搭档的“异地恋”意味着它们不能直接对话，但可以通过几种巧妙的方式进行“通信”。

把它们想象成一家公司的两个部门：PHP是后台数据处理部门，JavaScript是前台展示交互部门。前台需要后台的数据来展示，后台需要前台的指令来处理数据。

它们之间传递的不是直接的函数调用，而是数据“情书”。这些“情书”通过HTTP请求在服务器和浏览器之间传递，将后台处理好的数据送到前台，或将前台的请求送到后台处理。

2015年左右，随着AJAX技术的普及，PHP和JavaScript之间的这种数据传递方式变得更加高效和自然，使得无需刷新整个页面就能更新部分内容成为可能。

02 数据直传，代码“基因融合”

最简单直接的PHP与JavaScript交互方式是在PHP中直接输出JavaScript代码。当PHP文件被服务器处理并发送到浏览器时，其中包含的JavaScript代码也会被一起发送并执行。

这种方法就像是让PHP“生下”一个自带JavaScript“基因”的HTML页面。

来看一个基础示例，假设你有一个用户名字变量需要传递给JavaScript：

<?php
$userName = "张三";
$isLoggedIn = true;
$userScores = [85, 92, 78, 96];
?>

<script>
// PHP变量的值直接嵌入JavaScript中
var userName = "<?php echo $userName; ?>";
var isLoggedIn = <?php echo $isLoggedIn ? 'true' : 'false'; ?>;
var userScores = <?php echo json_encode($userScores); ?>;

console.log("欢迎, " + userName + "!");
if(isLoggedIn) {
    console.log("您已登录");
}
console.log("您的成绩: ", userScores);
</script>

这种方法特别适合传递页面初始化时就需要的数据。比如，用户登录状态、网站配置信息、产品列表等。它的优点是简单直接，无需额外HTTP请求。

但要小心安全漏洞！直接将PHP变量输出到JavaScript中可能导致XSS（跨站脚本攻击）风险。记得始终使用htmlspecialchars()或json_encode()对输出进行转义。

// 安全的方式
var userName = <?php echo json_encode($userName); ?>;

// 不安全的方式（不要这样做！）
var userName = "<?php echo $userName; ?>";

复杂数据（如数组或对象）的传递，json_encode() 是不二选择。

03 AJAX传信，异步“小纸条”

当页面已经加载完成，需要与服务器交换数据而不刷新整个页面时，AJAX就派上用场了。这种方式就像是前后端在课堂上传纸条，不需要举手报告老师（刷新页面），信