一、如何传递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学习日志（五）