实战案例

<!-- 前端 -->
<input id="name" placeholder="用户名">
<input id="age" type="number" placeholder="年龄">
<button id="btn">注册</button>
<p id="msg"></p>

<script>
document.getElementById("btn").addEventListener("click", async () => {
    const payload = {
        name: document.getElementById("name").value,
        age: Number(document.getElementById("age").value)
    };

    const res = await fetch("/api/register", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload)          // 对象 → JSON
    });

    const result = await res.json();           // JSON → 对象
    document.getElementById("msg").textContent =
        result.ok ? "注册成功" : "注册失败：" + result.message;
});
</script>

<!-- 后端 PHP -->
<?php
// $data = json_decode(file_get_contents("php://input"), true);
// if (!$data || empty($data["name"])) {
//     echo json_encode(["ok" => false, "message" => "用户名不能为空"]);
// } else {
//     echo json_encode(["ok" => true]);
// }
?>