jspost请求详解

POST 解决什么问题GET 适合读取数据POST 用来把前端的数据发送给后端服务器保存。 GET 把参数拼在 URL 里长度有限、明文可见不适合传大量内容、密码、表单。 POST 是放在请求体request body里面传给后端不会暴露在地址栏能传更多数据。一句话GET 是拿POST 是提交。2. POST 使用场景用户登录提交账号密码新增数据新增部门、新增用户比如在组织架构树新增一条员工提交表单发表评论、提交订单上传简单文本数据文件上传会更复杂本篇不涉及小提醒 GET查询不修改服务器数据 POST提交新增 / 修改服务器数据。3. POST 使用步骤对比 GET两处关键差别前面 4 步基础流程不变但是有两个新增关键点必须设置请求头Content-Type告诉后端我传过去的数据是什么格式传 JSON 就设application/json表单格式是application/x-www-form-urlencoded数据放在 send () 里面不是拼在 url 上示例 1POST 提交 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重点2send里面放数据必须把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值1key2值2 let dataStr name测试部门parentId1 xhr.onreadystatechange (){ if(xhr.readyState 4 xhr.status 200){ console.log(xhr.responseText) } } xhr.send(dataStr)坑点POST 忘记 setRequestHeader后端拿到的数据就是 undefined接收不到参数