本文教你如何构建一个 html 表单，安全接收两个数字输入，并通过 post 提交后，动态实例化 php 计算器类，根据用户选择的运算类型（加、减、乘、除）调用对应方法返回结果。
本文教你如何构建一个 html 表单，安全接收两个数字输入，并通过 post 提交后，动态实例化 php 计算器类，根据用户选择的运算类型（加、减、乘、除）调用对应方法返回结果。
在 Web 开发中，将表单数据与面向对象的 PHP 类协同工作是基础但关键的技能。初学者常误用 试图直接触发服务器端逻辑——但这类按钮默认不提交表单，也无法传递操作意图；真正适合“选择操作类型”的是 单选按钮（radio），它能将用户意图（如 operation=add）随表单一同提交至服务端。
以下是一个完整、安全、可运行的实现方案：
✅ 正确结构：表单 + 类 + 条件调用
<?php
class MyCalculator {
private $first, $second; // 推荐使用 private 封装属性
public function __construct($fval, $sval) {
$this->first = (float)$fval;
$this->second = (float)$sval;
}
public function add() {
return $this->first + $this->second;
}
public function subtract() {
return $this->first - $this->second;
}
public function multiply() {
return $this->first * $this->second;
}
public function divide() {
if ($this->second == 0) {
throw new InvalidArgumentException("Division by zero is not allowed.");
}
return $this->first / $this->second;
}
}
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>PHP 四则运算计算器</title>
<style>
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; margin: 2rem; }
.form-group { margin: 1rem 0; }
label { display: inline-block; width: 80px; }
input[type="number"], input[type="radio"] { margin-left: 0.5rem; }
.result { margin-top: 1.5rem; padding: 0.75rem; background: #f0f8ff; border-left: 4px solid #4285f4; }
</style>
</head>
<body>
<h2>简易计算器</h2>
<form method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>">
<div class="form-group">
<label for="num-a">数值 A：</label>
<input type="number" id="num-a" name="num-a" step="any" required>
</div>
<div class="form-group">
<label for="num-b">数值 B：</label>
<input type="number" id="num-b" name="num-b" step="any" required>
</div>
<div class="form-group">
<label>选择运算：</label><br>
<label><input type="radio" name="operation" value="add" required> 加法 (+)</label><br>
<label><input type="radio" name="operation" value="subtract"> 减法 (−)</label><br>
<label><input type="radio" name="operation" value="multiply"> 乘法 (×)</label><br>
<label><input type="radio" name="operation" value="divide"> 除法 (÷)</label>
</div>
<button type="submit">计算</button>
</form>
<?php
// ✅ 关键：仅在表单提交且数据完整时执行计算
if ($_SERVER['REQUEST_METHOD'] === 'POST'
&& isset($_POST['num-a'], $_POST['num-b'], $_POST['operation'])) {
$a = trim($_POST['num-a']);
$b = trim($_POST['num-b']);
$op = $_POST['operation'];
// 基础校验：确保为有效数字
if (!is_numeric($a) || !is_numeric($b)) {
echo '<div class="result">❌ 错误：请输入有效的数字。</div>';
} else {
try {
$calc = new MyCalculator($a, $b);
$result = null;
switch ($op) {
case 'add': $result = $calc->add(); break;
case 'subtract': $result = $calc->subtract(); break;
case 'multiply': $result = $calc->multiply(); break;
case 'divide': $result = $calc->divide(); break;
default: throw new InvalidArgumentException("不支持的操作：{$op}");
}
echo '<div class="result">✅ 运算结果：<strong>' . htmlspecialchars($result) . '</strong></div>';
} catch (InvalidArgumentException $e) {
echo '<div class="result">❌ 计算错误：' . htmlspecialchars($e->getMessage()) . '</div>';
}
}
}
?>
</body>
</html>⚠️ 注意事项与最佳实践
- 安全性优先：始终对 $_POST 数据做 isset() 检查和类型/范围校验；使用 htmlspecialchars() 防止 XSS 输出；
- 避免 type="button"：它不提交表单，若需 JS 交互请配合 AJAX；本例纯服务端处理，必须用 type="submit" 或隐式提交（如 radio + submit button）；
-
健壮性增强：
- 使用 (float) 强制转换确保数值类型；
- 除零检查应在类方法内完成（已示例）；
- required 属性提升前端体验，但不可替代后端校验；
- 用户体验优化：添加 CSS 样式、语义化标签（
- 扩展建议：后续可增加「运算历史记录」、「支持负数/科学计数」或封装为 Composer 包复用。
掌握这一模式，你已具备连接表单与业务逻辑的核心能力——下一步可尝试将计算器升级为支持链式运算或 RESTful API 接口。
