POST 提交数据

这是什么：POST = HTTP 请求方法的一种，把数据放进请求体发给服务器，用于「提交、创建」类操作——登录、注册、发评论都是它。

为什么用：GET 的参数拼在地址上，又短又公开，只适合「查询」；要给服务器传一大块数据（比如整个表单、一段 JSON），就得用 POST 从请求体里走，容量大、相对私密。

如何用：fetch 的第二个参数登场——method、headers、body 三件套，把对象变成 JSON 交出去。

fetch 三件套：method / headers / body

let newPost = {
  title: '呱小吉的第一篇博客',
  body: '今天学会了用 fetch 提交数据！',
  userId: 1
}

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',                                              // ① 请求方法
  headers: { 'Content-Type': 'application/json' },             // ② 数据是什么类型
  body: JSON.stringify(newPost)                                // ③ 数据本体
})
  .then(res => res.json())
  .then(data => console.log(data))

你会看到（服务器返回刚创建的记录，带上了新 id）：

{title: '呱小吉的第一篇博客', body: '今天学会了用 fetch 提交数据！', userId: 1, id: 101}

参数	作用	要点
`method`	请求方法	不写默认 GET；提交数据写 `'POST'`
`headers`	请求头	`Content-Type: application/json` 告诉服务器「我发的是 JSON」
`body`	请求体	只能是字符串，所以对象要先 `JSON.stringify` 打包

注意第 ③ 行：body 不认对象，只认字符串——JSON 教程里学的 JSON.stringify() 在这里正式上岗：出门打包，全靠它。

完整闭环：JSON 出门又进门

把三件套和上一章的渲染连起来，就是一次完整的「前后端对话」：

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(newPost)      // 出门：对象 → JSON 文本
})
  .then(res => {
    if (!res.ok) throw new Error('HTTP ' + res.status)   // 201 也算 ok
    return res.json()
  })
  .then(saved => console.log('服务器已保存，id 是', saved.id))
  .catch(err => console.error('提交失败：', err.message))

你会看到：

服务器已保存，id 是 101

数据出门前 stringify 打包，回来后 res.json() 拆包——JSON 的两扇门在 AJAX 里终于会师。

GET vs POST 怎么选

对比项	GET	POST
参数位置	URL 里（可见）	请求体里（相对不可见）
数据量	小（URL 长度有限）	大
语义	查询、获取	提交、创建、修改
幂等（重复发结果一样？）	是	否（重复 POST 可能创建两条）

简单记：拿数据用 GET，给数据用 POST。密码、身份证这类敏感信息绝不能放 GET 参数里——URL 会被浏览器历史、服务器日志到处记录。

真实表单提交的骨架

登录表单提交的核心就这几行（服务器地址换成你自己的后端）：

let form = { username: document.getElementById('user').value,
             password: document.getElementById('pass').value }

fetch('/api/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(form)
})
  .then(res => res.json())
  .then(result => {
    if (result.success) alert('登录成功')
    else alert('登录失败：' + result.msg)
  })

记忆口诀：POST 三件套，方法加头加身体；body 要 stringify，拿数据才用 GET。

📝 本章小结

fetch 第二参数配置请求：method: 'POST'、headers 声明 JSON、body 放字符串
body 只收字符串，对象必须先 JSON.stringify()；服务器返回仍用 res.json() 拆
创建成功常见状态码 201，res.ok 同样覆盖它
选择口诀：拿数据 GET、给数据 POST，敏感信息别进 URL

动手改

给 newPost 加一个 tags 数组字段提交，看看服务器原样收下了没
把 method 改成 'PUT' 请求 /posts/1（更新语义），观察返回的 id
故意删掉 headers 那行再提交，思考服务器为什么可能不认这个数据

上一章：渲染数据 · 下一章：async/await 与错误处理 🐸