我在项目中只有这个index.php 文件。我知道我应该将逻辑与视图分开，为 PHP、JS 和 HTML 使用不同的文件。这只是一个测试：
<?php
if($_SERVER["REQUEST_METHOD"] == "POST") {
if(isset($_POST["item"]) && $_POST["item"] == "new") {
$description = filter_input(INPUT_POST, trim("description"));
echo json_encode($description);
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Itens</title>
</head>
<body>
<form method="post">
<input type="text" name="description" placeholder="Description">
<button type="submit">Add Item</button>
</form>
<script>
const form = document.querySelector("form")
form.addEventListener('submit', async (e) => {
e.preventDefault()
const item = "new"
const description = form.description.value
const formData = new FormData()
formData.append("item", item)
formData.append("description", description)
try {
await fetch('./index.php', {
method: 'POST',
body: formData,
headers: {
'Accept': 'application/json, text/plain, */*'
}
})
.then((res) => res.json())
.then((data) => {
alert(data)
})
}
catch(error) {}
})
</script>
</body>
</html>
echo json_encode() 工作并发送响应，但也发送整个页面，重新加载 index.php，这使得无法在 JavaScript 获取代码中使用响应值。当在与调用它的代码不同的脚本中使用 echo json_encode() 时，当然不会发生这种情况。是否可以解决这个问题并保留这个文件结构？
是的，将其放入 HTML 中
<?php
$jsonData = {};
if($_SERVER["REQUEST_METHOD"] == "POST") {
if(isset($_POST["item"]) && $_POST["item"] == "new") {
$description = filter_input(INPUT_POST, trim("description"));
$jsonData = json_encode($description);
}
}
?>
<script>
const json = <?php echo $jsonData; ?>
</script>
<pre><?php echo $jsonData; ?></pre>
您提到的更干净的方法（REST api）是将 json 输出放入单独的 php 脚本中，并使用 javascript 请求 json。