Ajax入门(四)
- 一、如何传递post请求参数
- 1.1)post请求和get请求的差别
- 1.2) 在app.js创建新路由
- 1.3) 在public文件夹新建一个html文件
- 1.4)在浏览器运行
一、如何传递post请求参数
1.1)post请求和get请求的差别
首先,得了解什么是HTTP报文。
HTTP报文是用于HTTP协议交互的信息,请求端的HTTP报文叫请求报文,响应端的叫响应报文。
HTTP报文本身是多行数据构成的字符串文本,HTTP报文分为报文首部(head),和报文主体(body),两者一般用空行隔开。
其中,body部分是可以为空的,比如get请求。
但是post请求的body部分不能为空,post请求需要让接收的一方知道post过去给人家的是什么类型的数据,采用什么编码,这时候就需要在 Content-Type 来指明 body 的MIME 类型。
常见的MIME 类型
// 表示你传递的“表格数据”是纯文本(utf-8编码)。打引号的原因是这可能并不会被服务端解读为表格类型。
xhr.setRequestHeader('Content-Type', 'text/plain; charset=utf-8');
// 【post请求】这个HTTP请求如果携带FormData(就是XmlHttpRequest对象中使用send(xxx)方法时传递的那个xxx参数),那么使用它
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 提交一个带二进制流的表格时使用
xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=xxx');
1.2) 在app.js创建新路由
app.post('/post', (req, res) =>{
// req.body / req.cookies:获得「请求主体」/ Cookies
res.send(req.body);
})
1.3) 在public文件夹新建一个html文件
<h2>
<input type="text" id="userName" placeholder="用户名:">
</h2>
<h2>
<input type="text" id="userAge" placeholder="年龄:">
</h2>
<h2>
<input type="Button" id="btn" value="提交">
</h2>
<script>
//POST数据,是在报文当中的,因此请使用 setRequestHeader() 来添加 HTTP 头
// 绑定html文件上的用户名+年龄
let userName = document.getElementById("userName");
let userAge = document.getElementById("userAge");
// 绑定按钮,并且给按钮创建点击事件
let btn = document.getElementById("btn");
btn.onclick = function () {
// 创建Ajax对象
let xhr = new XMLHttpRequest();
// 获取用户输入的文本内容
let nameValue = userName.value;
let ageValue = userAge.value;
// 拼接请求参数,确定请求并且发送请求
let params = 'userName=' + nameValue + '&userAge=' + ageValue;
xhr.open('post', 'http://localhost:8822/post');
// 设置请求参数格式的类型(post请求参数必须要做到),如果发送的数据是类似与xxx=aa&xxx=bb的样式的话,那必须使用下面的类型语句
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 注意:在Post请求中,send方法内部一定要有参数!!
xhr.send(params);
// 获得服务器的响应数据
xhr.onload = function () {
console.log(xhr.responseText);
}
}
</script>
1.4)在浏览器运行
———————————————————————————————————————
上一篇:
Ajax学习日志(三)
下一篇:
Ajax学习日志(五)
更多推荐
Ajax学习日志(四)—— 如何传递post请求参数
发布评论