PHP、HTML与JavaScript之间互相传值的几种常见方法

1. PHP 向后端输出数据 (PHP → HTML / JavaScript)

PHP 作为服务端语言，可以直接将变量嵌入到生成的 HTML 代码中，供浏览器端的静态资源读取。

第1步：将 PHP 变量嵌入 HTML 属性

目的：在 HTML 元素的属性（如 value、id 等）中直接显示 PHP 计算或查询的结果。

操作说明：使用 标签在 HTML 结构中插入 PHP 代码。注意输出时需确保数据已转义以避免 XSS 风险，但在简单展示中可直接 Echo。

<!-- 示例：只读输入框显示 PHP 变量 -->
<input type="text" readonly="readonly" style="background-color:#DCDCDC" 
       value="<?php echo $perinfo['ID']; ?>" />

第2步：将 PHP 数据传递给 JavaScript

目的：让前端 JavaScript 能够处理服务器端返回的动态数据（如数组、对象）。

操作说明：利用 JSON 编码将 PHP 数组转换为字符串，直接赋值给 JS 变量。这是前后端分离前最常用且高效的方法。

<script type="text/javascript">
    // 假设 $array 是 PHP 中的多维数组
    var ability = <?php echo json_encode($array); ?>;
    console.log(ability);
</script>

第3步：PHP 与 MySQL 数据库交互

目的：从数据库中获取数据并准备在前端展示。

注意：以下代码使用了旧版 mysql_ 扩展，在实际现代项目中应替换为 PDO 或 mysqli。此处仅演示原始逻辑。

<?php
$dbcnx = @mysql_connect("localhost", "root", "password"); // 建议不使用硬编码密码
if (!$dbcnx) {
    exit("Unable to connect to the database server at this time.");
}

if (!@mysql_select_db("pms")) {
    exit("Unable to locate the database at this time.");
}

// 设置字符集以支持中文
mysql_query("SET NAMES 'utf8'"); 

// 查询数据
$q = mysql_query("SELECT * FROM ability WHERE ALV = 1");
while ($row = mysql_fetch_array($q)) {
    $array1[] = $row['AName'];
}
// $array1 现在可以像上面的例子一样传给前端
?>

2. HTML 向 JavaScript 和 PHP 传值

第1步：HTML 通过表单向 PHP 提交数据 (POST 方式)

目的：用户填写表单后，将数据发送到服务器端的 PHP 文件处理。

操作说明：创建表单，设置 method="POST" 和 action 指向目标 PHP 文件。隐藏域 (type="hidden") 常用于存储不需要用户编辑但需传输的数据。

<form id="myForm" name="myForm" method="POST" action="do.php">
    <!-- 隐藏字段用于传递计数或标识 -->
    <input type="hidden" id="count" name="count" value="1"/>
    <input type="submit" name="Submit" value="Search"/>
</form>

在 do.php 中接收数据：

<?php
if (isset($_POST['count'])) {
    $val = $_POST['count'];
    echo "Received count: " . $val;
} else {
    echo "No data received.";
}
?>

第2步：JavaScript 读取和修改 HTML 元素

目的：在不刷新页面的情况下，动态读取或更改页面上的元素值。

操作说明：使用 document.getElementById() 获取 DOM 元素，然后访问或修改其 value、innerText 等属性。

<script type="text/javascript">
    // 获取元素引用
    var te = document.getElementById("count");
    
    // 读取当前值
    var currentValue = te.value;
    
    // 修改值
    te.value = 99;
    console.log("Updated value: " + te.value);
</script>

3. JavaScript 间接向 PHP 传值

由于 JS 运行在客户端，PHP 运行在服务器端，两者不能直接通信。通常需要通过 HTML 表单提交或使用 AJAX 技术来实现。

第1步：JS 先更新 HTML 隐藏域

目的：将 JS 计算出的结果存入表单的隐藏字段中，准备发送。

<script type="text/javascript">
var jsValue = 10;
var te = document.getElementById("count");
te.value = jsValue; // 将 JS 值赋给 hidden 输入框
</script>

第2步：触发表单提交

目的：将包含新值的表单数据发送给服务器。

操作说明：可以通过按钮点击调用 document.forms[0].submit() 来提交上述定义的表单。

第3步：PHP 接收处理后的数据

目的：服务器端验证并使用 JS 传来的数据。

<?php
// do.php
// 此时 $_POST['count'] 即为 JS 刚才设置的值
$val = isset($_POST['count']) ? $_POST['count'] : 0;
echo "Server received: " . $val;
?>

4. JavaScript 动态修改 HTML 链接 (DOM 操作)

目的：根据逻辑动态生成 URL 或修改现有元素属性。

<script type="text/javascript">
function updateLink() {
    var id = "2023";
    var aElem = document.getElementById("articleLink");
    // 注意：replace 不会改变 href 本身，需重新赋值
    var newHref = aElem.href.replace('(n)', id);
    aElem.href = newHref;
}
</script>

<a id="articleLink" href="ExportArticle.action?articles=(n)">Download</a>

以上就是 PHP、HTML 与 JavaScript 之间互相传值的详细内容，更多关于 Web 前端与后端通信的资料请关注本站其它相关文章！