04. get、post请求

于2022-10-31 11:57:17发布

get请求

功能：页面输入账号和密码，点提交。后台获取提交的路径和数据。

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://localhost:8080/aaa" method="get">
        姓名：<input type="text" name="user" value=""><br/>
        密码：<input type="text" name="pass" value=""><br/>
        <input type="submit" value="提交">
    </form>
</body>
</html>

注意action的提交路径和method

node

const http = require('http');
const urlLib = require('url');

const server = http.createServer((req,res)=>{
    if (req.url === '/favicon.ico') { return; }
    const obj = urlLib.parse(req.url, true);
    console.log(obj);
    res.end();
}).listen(8080);

输出：

若想获取到user，则obj.query.user

分析

1. req.url 获取到的链接是/aaa?user=tom&pass=123456, 可以使用url模块提供的parse方法，获取到路径 /aaa,以及数据 { user: 'tom', pass: '123456' }

2. url.parse 的第二个参数如果传入true，则会把/aaa?user=55&pass=66中的 “user=55&pass=66” 转成json { user: '55', pass: '66' }

总结

get请求通过req.url就可以获取到前端提交的参数。

post请求

功能与上面的get请求一样

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://localhost:8080/aaa" method="post">
        姓名：<input type="text" name="user" value=""><br/>
        密码：<input type="text" name="pass" value=""><br/>
        <input type="submit" value="提交">
    </form>
</body>
</html>

注意method为post

node

const http = require('http');
const qs = require('querystring');

const server = http.createServer((req,res)=>{

    let str = '';

    req.on('data',(data)=>{
        str+=data;
    });

    req.on('end',()=>{
        console.log( qs.parse(str) );
    });

});
server.listen(8080);

输出：

分析

1. 由于post请求接收的文件可能会很大，所以一般是分段式发送。所以需要用到request的data和end事件

2. data事件如果发送过来的数据足够大，则会触发多次，每次接收一小部分数据。否则只会执行一次

3. end事件则会在数据完全接收完毕后调用，该事件只会触发一次

4. 最终接收到的数据的格式也是xxx=xxx&xxx=xxx，使用querystring模块则可以把a=5&b=6这样的数据转成json格式：{ a: '5', n: '6' }

总结

post请求需要有2个事件，on和end，数据接受完毕后，在end事件则可以获取到数据