企业管理系统定制开发Ajax学习日志（四）—— 如何传递post请求参数

一、如何传递post请求参数

1.1）post请求和get企业管理系统定制开发请求的差别

首先，企业管理系统定制开发得了解什么是。

HTTP企业管理系统定制开发报文是用于HTTP协议交互的信息，请求端的HTTP报文叫请求报文，响应端的叫响应报文。
HTTP报文本身是多行数据构成的字符串文本，HTTP报文分为报文首部(head)，和报文主体(body)，两者一般用空行隔开。

其中，body部分是可以为空的，比如get请求。

但是post请求的body部分不能为空，post请求需要让接收的一方知道post过去给人家的是什么类型的数据，采用什么编码，这时候就需要在 Content-Type 来指明 body 的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
3
4
5
6
7
8
9

1.2) 在app.js创建新路由

app.post('/post', (req, res) =>{   // req.body / req.cookies：获得「请求主体」/ Cookies    res.send(req.body);})
1
2
3
4

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

1.4）在浏览器运行

———————————————————————————————————————

上一篇：

下一篇：