NodeJS收发GET和POST请求

红太狼 2021-09-16 06:12 433阅读 0赞

转自：[https://www.cnblogs.com/gamedaybyday/p/6637933.html][https_www.cnblogs.com_gamedaybyday_p_6637933.html]

仅用于学习！！！

一 express框架接收

二 接收Get

三 发送Get

四 接收Post

五 发送Post

![1062174-20170329092126170-1952636584.png][]

**一 express框架接收**

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>app.</code><code>get</code><code>(</code><code>'/'</code><code>,function(req,res) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>url = req.query.url;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>name = req.query.name;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(url, name);</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

**二 接收Get**

1. get参数在req.url上

2. 使用url.parse将数据由字符串转变为obj

index.js：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 </td> 
 <td> <code>var</code>&nbsp;<code>http = require(</code><code>'http'</code><code>);</code> <code>var</code>&nbsp;<code>url = require(</code><code>'url'</code><code>);</code> <code>var</code>&nbsp;<code>util = require(</code><code>'util'</code><code>);</code> &nbsp; <code>//req 请求信息&nbsp;&nbsp; res返回信息</code> <code>http.createServer(function(req, res){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>res.writeHeader(200, { </code><code>'Content-Type'</code><code>:</code><code>'text/javascript;charset=UTF-8'</code><code>});&nbsp;&nbsp;</code><code>//状态码+响应头属性</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 解析 url 参数</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>params</code>&nbsp;<code>= url.parse(req.url,&nbsp;</code><code>true</code><code>).query;&nbsp;&nbsp;</code><code>//parse将字符串转成对象,req.url="/?url=123&amp;name=321"，true表示params是{url:"123",name:"321"}，false表示params是url=123&amp;name=321</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>res.write(</code><code>"网站名："</code>&nbsp;<code>+&nbsp;</code><code>params</code><code>.name);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>res.write(</code><code>"\n"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>res.write(</code><code>"网站 URL："</code>&nbsp;<code>+&nbsp;</code><code>params</code><code>.url);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>res.end();</code> &nbsp; <code>}).listen(3000);</code> </td> 
 </tr> 
 </tbody> 
</table>

浏览器打开：

网页显示：

**三 发送Get**

index.js：

<table> 
 <tbody> 
 <tr> 
 <td> 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 </td> 
 <td> <code>var</code>&nbsp;<code>http = require(</code><code>'http'</code><code>);&nbsp;</code> <code>&nbsp;&nbsp;</code>&nbsp; <code>var</code>&nbsp;<code>qs = require(</code><code>'querystring'</code><code>);&nbsp;</code> <code>&nbsp;&nbsp;</code>&nbsp; <code>var</code>&nbsp;<code>data = {&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>a: 123,&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>time:&nbsp;</code><code>new</code>&nbsp;<code>Date().getTime()};</code><code>//这是需要提交的数据&nbsp;</code> <code>&nbsp;&nbsp;</code>&nbsp; <code>&nbsp;&nbsp;</code>&nbsp; <code>var</code>&nbsp;<code>content = qs.stringify(data);&nbsp;</code> <code>&nbsp;&nbsp;</code>&nbsp; <code>var</code>&nbsp;<code>options = {&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>hostname:&nbsp;</code><code>'127.0.0.1'</code><code>,&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>port: 10086,&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>path:&nbsp;</code><code>'/pay/pay_callback?'</code>&nbsp;<code>+ content,&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>method:&nbsp;</code><code>'GET'</code>&nbsp; <code>};&nbsp;</code> <code>&nbsp;&nbsp;</code>&nbsp; <code>var</code>&nbsp;<code>req = http.request(options, function (res) {&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'STATUS: '</code>&nbsp;<code>+ res.statusCode);&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'HEADERS: '</code>&nbsp;<code>+ JSON.stringify(res.headers));&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>res.setEncoding(</code><code>'utf8'</code><code>);&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>res.</code><code>on</code><code>(</code><code>'data'</code><code>, function (chunk) {&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'BODY: '</code>&nbsp;<code>+ chunk);&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});&nbsp;</code> <code>});&nbsp;</code> <code>&nbsp;&nbsp;</code>&nbsp; <code>req.</code><code>on</code><code>(</code><code>'error'</code><code>, function (e) {&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'problem with request: '</code>&nbsp;<code>+ e.message);&nbsp;</code> <code>});&nbsp;</code> <code>&nbsp;&nbsp;</code>&nbsp; <code>req.end();</code> </td> 
 </tr> 
 </tbody> 
</table>

**四 接收Post**

当请求这个页面时，如果post数据中没有name和url，则返回一个提交页面；如果有name和url，则打印。

1. post请求会触发"data"事件。

2. chuck使用+=保存，因为会额外请求favicon.ico，导致body=\{\}。

3. 请求结束，会触发"end"事件。将chuck反序列化querystring.parse(body)为对象数组, 使用body.name访问post变量。

index.js：

<table> 
 <tbody> 
 <tr> 
 <td> 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 </td> 
 <td> <code>var</code>&nbsp;<code>http = require(</code><code>'http'</code><code>);</code> <code>var</code>&nbsp;<code>querystring = require(</code><code>'querystring'</code><code>);</code> &nbsp; <code>var</code>&nbsp;<code>postHTML =</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>'&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;菜鸟教程 Node.js 实例&lt;/title&gt;&lt;/head&gt;'</code>&nbsp;<code>+</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>'&lt;body&gt;'</code>&nbsp;<code>+</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>'&lt;form method="post"&gt;'</code>&nbsp;<code>+</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>'网站名： &lt;input name="name"&gt;&lt;br&gt;'</code>&nbsp;<code>+</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>'网站 URL： &lt;input name="url"&gt;&lt;br&gt;'</code>&nbsp;<code>+</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>'&lt;input type="submit"&gt;'</code>&nbsp;<code>+</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>'&lt;/form&gt;'</code>&nbsp;<code>+</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>'&lt;/body&gt;&lt;/html&gt;'</code><code>;</code> &nbsp; <code>http.createServer(function (req, res) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//暂存请求体信息</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>body =&nbsp;</code><code>""</code><code>;</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//请求链接</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(req.url);</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//每当接收到请求体数据，累加到post中</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>req.</code><code>on</code><code>(</code><code>'data'</code><code>, function (chunk) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>body += chunk;&nbsp;&nbsp;</code><code>//一定要使用+=，如果body=chunk，因为请求favicon.ico，body会等于{}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>"chunk:"</code><code>,chunk);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//在end事件触发后，通过querystring.parse将post解析为真正的POST请求格式，然后向客户端返回。</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>req.</code><code>on</code><code>(</code><code>'end'</code><code>, function () { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 解析参数</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>body = querystring.parse(body);&nbsp;&nbsp;</code><code>//将一个字符串反序列化为一个对象</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>"body:"</code><code>,body);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 设置响应头部信息及编码\&lt;br&gt;&lt;br&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; res.writeHead(200, {'Content-Type': 'text/html; charset=utf8'});</code> </td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 </td> 
 <td> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(body.name &amp;&amp; body.url) {&nbsp;</code><code>// 输出提交的数据</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>res.write(</code><code>"网站名："</code>&nbsp;<code>+ body.name);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>res.write(</code><code>"&lt;br&gt;"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>res.write(</code><code>"网站 URL："</code>&nbsp;<code>+ body.url);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}&nbsp;</code><code>else</code>&nbsp;<code>{&nbsp;&nbsp;</code><code>// 输出表单</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>res.write(postHTML);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>res.end();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>}).listen(3000);</code> </td> 
 </tr> 
 </tbody> 
</table>

浏览器中打开：http://127.0.0.1:3000/

第一次访问127.0.0.1，post中没有name和url，显示提交页面。

![1062174-20170329090722717-1360974024.png][]

点击提交后，网页会打印出如下结果。

![1062174-20170329090825451-1888625725.png][]

问题：

1. req.on("end"事件会多次触发。因为会请求favicon.ico。

![1062174-20170329090912858-360891243.png][]

2.  *res.writeHead(200, \{'Content-Type': 'text/html; charset=utf8'\}); *

text/html的意思是将文件的content-type设置为text/html的形式，浏览器在获取到这种文件时会自动调用html的解析器对文件进行相应的处理。

text/plain的意思是将文件设置为纯文本的形式，浏览器在获取到这种文件时并不会对其进行处理。

**五 发送Post**

index.js：

[https_www.cnblogs.com_gamedaybyday_p_6637933.html]: https://www.cnblogs.com/gamedaybyday/p/6637933.html
[1062174-20170329092126170-1952636584.png]: /images/20210813/2bc46398b3834512b92e2758605330e5.png
[1062174-20170329090722717-1360974024.png]: /images/20210813/2a0b5475f7fa4fb29fcf2e6c983f9ce4.png
[1062174-20170329090825451-1888625725.png]: /images/20210813/ec35295454cc4ea48045a9b7e15afa5d.png
[1062174-20170329090912858-360891243.png]: /images/20210813/b8c59ff3e984402b982fd0cfa59d8e4d.png