post方法的用法其实跟get是大同小异的 唯一不同的地方就是我们需要修改server.js的文件 只需要将get修改为post即可
那么我为了方便操作我这里选择的是直接在下面增加了一段post的代码 直接复制一份粘贴出来 代码如下
//1.引入express
// const { response } = require('express');
const express = require('express');
//2.创建应用对象
const app = express();
// 3.创建路由规则
//requser 是对请求报文的封装
//response 是对响应报文的一个封装
app.get("/server",(requset,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
// 设置响应体
response.send("这是我传输过来的数据体！GET请求数据");
})
//这一段是我新增的代码段
app.post("/server",(requset,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
// 设置响应体
response.send("这是我传输过来的数据体！POst数据体");
})
// 4.监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动，8000 端口监听中...");
})为了方便操作 我们这里是直接创建了一个新的HTml文件 代码放在这里
<!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>Ajax Post 请求</title>
<style>
#result{
width: 200px;
height: 100px;
border: solid 1px #903;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
//获取元素对象
const result = document.getElementById('result');
//绑定事件
result.addEventListener("mouseover",function(){
//1.创建对象
const xhr = new XMLHttpRequest();
//2.初始化对象 设置它的一个类型与地址URL
xhr.open('POST','http://localhost:8000/server')
//3.发送 send
xhr.send();
//4.做事件绑定
xhr.onreadystatechange = function(){
//判断
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status <300){
//处理服务端返回的结果
result.innerHTML = xhr.response;
}
}
}
});
</script>
</body>
</html>
