jspost请求详解

POST 解决什么问题？

GET 适合读取数据；POST 用来把前端的数据发送给后端服务器保存 。 GET 把参数拼在 URL 里，长度有限、明文可见，不适合传大量内容、密码、表单。 POST 是放在**请求体（request body）**里面传给后端，不会暴露在地址栏，能传更多数据。

一句话：GET 是拿，POST 是提交。

2. POST 使用场景

1. 用户登录：提交账号密码
2. 新增数据：新增部门、新增用户（比如在组织架构树新增一条员工）
3. 提交表单：发表评论、提交订单
4. 上传简单文本数据（文件上传会更复杂，本篇不涉及）

小提醒： GET：查询，不修改服务器数据； POST：提交，新增 / 修改服务器数据。

3. POST 使用步骤（对比 GET，两处关键差别）

前面 4 步基础流程不变，但是有两个新增关键点：

1. 必须设置请求头 ：Content-Type，告诉后端我传过去的数据是什么格式（传 JSON 就设application/json；表单格式是application/x-www-form-urlencoded）
2. 数据放在 send () 里面，不是拼在 url 上！

示例 1：POST 提交 JSON 格式（现在项目最常用）

<script>
// 要发给后端的数据，JS对象
let submitData = {
  name: "测试部门",
  parentId: 1
}

// 1. 创建xhr对象
let xhr = new XMLHttpRequest()
// 2. open，方法改为POST，地址写接口地址
let apiUrl = "https://mock.apifox.cn/m1/xxxx/addDept"
xhr.open("POST", apiUrl)

// ✅POST重点1：设置请求头，声明我们传的是JSON字符串
xhr.setRequestHeader("Content-Type", "application/json")

// 3. 监听状态变化
xhr.onreadystatechange = () => {
  if(xhr.readyState === 4){
    if(xhr.status === 200){
      // 后端返回JSON字符串，解析成JS对象
      let res = JSON.parse(xhr.responseText)
      console.log("提交成功", res)
    }else{
      console.log("提交失败，状态码：", xhr.status)
    }
  }
}

// ✅POST重点2：send里面放数据，必须把JS对象转JSON字符串
xhr.send( JSON.stringify(submitData) )
</script>

示例 2：表单格式 application/x-www-form-urlencoded（老式表单）

let xhr = new XMLHttpRequest()
xhr.open("POST", "接口地址")
// 设置表单类型
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
// 数据格式：key1=值1&key2=值2
let dataStr = `name=测试部门&parentId=1`
xhr.onreadystatechange = ()=>{
  if(xhr.readyState === 4 && xhr.status === 200){
    console.log(xhr.responseText)
  }
}
xhr.send(dataStr)

坑点：POST 忘记 setRequestHeader，后端拿到的数据就是 undefined，接收不到参数！