PHP 不是来自表单数据的更新页面

Question

我的目标是在一页上获取 selector 的值。我想要每年有一个用户 select，并在一年 select 时更新页面。没有 $_GET 函数。

我会用步骤来演示，让大家多了解一点。

第1步：这是用户要在某一年按下的select元素的 select或
第 2 步： 应该有一个 echo 用户已经 select 编辑的内容。例如;我选择 2019 > 应该有一个 echo 某处打印 2019.

这是getData.php

<?php
echo file_get_contents('php://input');

echo json_decode($_POST["year"]);

echo $_POST["year"];
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/chartSelector.js" defer></script>
</head>
<body>
<div>
  <select name="jaarKiezer" id="jaarKiezer" onchange="changeData()">
    <option selected disabled>Choose a year</option>
    <option value="2019">2019</option>
    <option value="2020">2020</option>
    <option value="2021">2021</option>
  </select>
</div>
</body>
</html>

这是chartSelector.js

console.log("connected with js");
function changeData() {
    let yearJS = document.getElementById("jaarKiezer").value;
    console.log("changed to " + yearJS);
    getData(yearJS);
}

function getData(yearJS) {
    let formData = new FormData();
    formData.append("year", yearJS);
    fetch("../getData.php", {
        "body": formData,
        "method": "POST"
    }).catch(error => console.error(error));
}

在预览中的网络选项卡，您会看到它的 working。当我想在 'live' 页面上将表单数据 post 转换为 php 时，问题就来了什么都没发生。 getData.php 只有 2 个错误：Undefined array key "year".

上几张图加深理解：

网络选项卡本身：Network tab
负载：Payload
预览：Preview

我试过：

AJAX
使用 JSON.stringify(formData) 函数。
使用Headers （赞：header(Content-Type: application/json)）.

注意：我正在使用 php 服务器 来自 vscode 扩展

Answer 1

这里有两个明显的问题。

对Ajax工作原理的根本误解

浏览器发出 HTTP 请求。它获取 HTML 文档并将其呈现在视口中。

该页面包含一些 JavaScript 指示它发出新的 HTTP 请求。响应返回到 JavaScript 以供进一步处理。

您没有做任何进一步的处理，所以您看到的唯一效果是在浏览器开发人员工具的“网络”选项卡中。

请求没有时间倒退，替换之前请求显示的页面，改变显示的页面。

如果您想用新页面替换整个页面：使用常规表单提交。不要使用 Ajax.

如果你想对 Ajax 请求的响应做一些事情，那么你需要编写 JavaScript 来做那件事。

async function getData(yearJS) {
    let formData = new FormData();
    formData.append("year", yearJS);
    try { 
        const response = await fetch("../getData.php", {
            "body": formData,
            "method": "POST"
        });
        const html = await response.text();
        console.log(html); // Do something with the HTML more useful than logging it. 
    } catch (error) {
        console.log(error);
    }
}

你不是在处理 JSON

FormData 对象被转换为多部分表单数据请求体，不是 JSON.

删除：

echo file_get_contents('php://input');

echo json_decode($_POST["year"]);

PHP 将解析多部分表单数据请求正文并自动填充 $_POST 和 $_FILES 内容。

PHP 不是来自表单数据的更新页面

PHP is not update page from formdata

javascript

php

form-data

fetch

对Ajax工作原理的根本误解

你不是在处理 JSON