美文网首页Node.js
09_Node.js GET 与 POST 请求

09_Node.js GET 与 POST 请求

作者: e20a12f8855d | 来源:发表于2019-01-25 09:56 被阅读0次

在很多场景中，我们的服务器都需要跟用户的浏览器打交道，如表单提交，表单提交到服务器一般都使用 GET/POST 请求。

本篇文章将为大家介绍 Node.js GET/POST 请求。

一、获取 GET 请求内容

GET 请求被直接嵌入到 URL 路径中，包括“？”后面的部分，因此可以手动解析后面的内容作为 GET 请求参数，url 模块中的 parse 函数提供了这个功能。

get_post.js

const http = require('http');
const url = require('url');
const util = require('util');
const hostname = '127.0.0.1';
const port = 3000;
const server = http.createServer((request, response) => {
    response.statusCode = 200;
    response.setHeader('Content-Type', 'text/plain;charset=utf-8');
    if (request.url != '/favicon.ico') {
        console.log(url.parse(request.url, true));
    }
    // response.end(url.parse(request.url, true)); //throw new TypeError('First argument must be a string or Buffer');
    response.end(util.inspect(url.parse(request.url, true)));
});
server.listen(port, hostname, () => {
    console.log(`服务器运行在 http://${hostname}:${port}`);
});

在之前 Node.js 基础模块文章中讲解过 url 模块下 parse 函数，这个函数可以解析浏览器访问的地址，上边这个例子在浏览器访问 127.0.0.1:3000/?name=LiuZhenghe&&url=liuzhenghe.com/，可以在命令窗口看到解析的结果：

如果要打印到页面呢？我们如果把 console.log() 中的内容直接放到 response.end() 中，刷新页面程序就会报错，提示 .end() 第一个参数必须是字符串或缓冲区，此时就需要用到 util.inspect 这个方法，将对象转换为字符串。

此时再刷新页面，将会看到如下结果：

下面我们来获取 URL 的参数。

get_post.js

const http = require('http');
const url = require('url');
const util = require('util');
const hostname = '127.0.0.1';
const port = 3000;
const server = http.createServer((request, response) => {
    response.statusCode = 200;
    response.setHeader('Content-Type', 'text/plain;charset=utf-8');
    let result = url.parse(request.url, true);
    response.write(util.inspect(url.parse(request.url, true)));
    response.write('\n');
    response.write('网站名称：' + result.query.name);
    response.write('\n');
    response.write('网站地址：' + result.query.url);
    response.end();
});
server.listen(port, hostname, () => {
    console.log(`服务器运行在 http://${hostname}:${port}`);
});

在浏览器访问 127.0.0.1:3000/?name=LiuZhenghe&&url=liuzhenghe.com/，可以看到下边结果：

二、获取 POST 请求内容

POST 请求的内容全部的都在请求体中，http.ServerRequest 并没有一个属性内容为请求体，原因是等待请求体传输可能是一件耗时的工作。

比如上传文件，而很多时候我们可能并不需要理会请求体的内容，恶意的 POST 请求会大大消耗服务器的资源，所以 node.js 默认是不会解析请求体的，当你需要的时候，需要手动来做。

get_post.js

const http = require('http');
const util = require('util');
const querystring = require('querystring');
const hostname = '127.0.0.1';
const port = 3000;
const server = http.createServer((request, response) => {
    // 定义一个 post 变量，用于暂存请求体信息
    let post = '';
    // 通过 request 的 data 事件监听函数，每当接收到请求体的数据，就累加到 post 变量中
    request.on('data', function(chunk) {
        post += chunk;
    });
    // 在 end 事件触发后，通过 querystring.parse 将 post 解析为真正的 POST 请求格式，然后向客户端返回
    response.statusCode = 200;
    response.setHeader('Content-Type', 'text/plain;charset=utf-8');
    request.on('end', function(chunk) {
        post = querystring.parse(post);
        response.end(util.inspect(post));
    });
});
server.listen(port, hostname, () => {
    console.log(`服务器运行在 http://${hostname}:${port}`);
});

以下实例表单通过 POST 提交并输出数据：

get_post.js

const http = require('http');
const util = require('util');
const querystring = require('querystring');
const hostname = '127.0.0.1';
const port = 3000;
let postHTML = '<!DOCTYPE html>' +
'<html lang="en">' +
'<head>' +
    '<meta charset="UTF-8">' +
    '<title>get&post</title>' +
'</head>' +
'<body>' +
'<form action="" method="post">' +
    '网站名：<input type="text" name="name"><br>' +
    '网站地址：<input type="text" name="url"><br>' +
    '<input type="submit">' +
'</form>' +
'</body>' +
'</html>';
const server = http.createServer((request, response) => {
    // 定义一个 post 变量，用于暂存请求体信息
    let body = '';
    request.on('data', function(chunk) {
        body += chunk;
    });
    request.on('end', function() {
        // 解析参数
        body = querystring.parse(body);
        // 设置响应头部信息及编码
        response.statusCode = 200;
        response.setHeader('Content-Type', 'text/html;charset=utf-8');
        if (body.name && body.url) {
            // 输出提交的数据
            response.write('网站名称：' + body.name);
            response.write('<br>');
            response.write('网站地址：' + body.url);
        } else {
            // 输出表单
            response.write(postHTML);
        };
        response.end();
    });
});
server.listen(port, hostname, () => {
    console.log(`服务器运行在 http://${hostname}:${port}`);
});

提交后：

三、get 与 post 实例

get_postDemo.js

const http = require('http');
// 虚拟 SQL 读取出来的数据
let items = [];
const hostname = '127.0.0.1';
const port = 3000;
const server = http.createServer((request, response) => {
    // 设置跨域的域名，* 代表允许任意域名跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置 header 类型
    response.setHeader('Access-Control-Allow-Headers', 'Content-Type');
    // 跨域允许的请求方式
    response.setHeader('Content-Type', 'application/json');

    // 判断请求
    switch (request.method) {
        // post 请求时，浏览器会先发一次 options 请求，如果请求通过，则继续发送正式的 post 请求
        case 'OPTIONS':
            response.statusCode = 200;
            response.end();
            break;
            // 如果是 get 请求，则直接返回 items 数组
        case 'GET':
            let data = JSON.stringify(items);
            response.write(data);
            response.end();
            break;
            // 如果是 post 请求
        case 'POST':
            let item = '';
            // 读取每次发送的数据
            request.on('data', function(chunk) {
                item += chunk;
            });
            // 数据发送完成
            request.on('end', function() {
                // 存入
                item = JSON.parse(item);
                items.push(item.item);
                // 将数据返回到客户端
                let data = JSON.stringify(items);
                response.write(data);
                response.end();
            });
            break;
    };
});
server.listen(port, hostname, () => {
    console.log(`服务器运行在 http://${hostname}:${port}`);
});

上面代码首先加载了 http 模块，并创建了服务，然后设置了跨域的处理方式，允许进行跨域，接着进行了请求的判断处理，在这个简单的示例中只做了 get 和 post 两种判断，最后，将请求结果返回客户端。

以上是后端 Node.js 的部署，那么前端页面要怎么做呢？

新建 get_postDemo.html 文件，通过 Vue 对页面进行了布局，通过 Axios 进行了接口的请求，从而完成了对数据的操作。

get_postDemo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GET&POST</title>
</head>
<body>

<div id="app">
    <h1>Todo List</h1>
    <ul>
        <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
    <input type="text" v-model="item">
    <button @click="postApi">添加</button>
</div>

<!-- 引用 vue 和 axios -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm = new Vue({
    el: '#app',
    data: function() {
        return {
            items: [],
            item: '',
        };
    },
    created() {
        // 进入页面请求数据
        axios.get('http://127.0.0.1:3000/').then(response => {
            console.log('\n 【API - get 数据】');
            console.log(response);
            this.items = response.data;
        }).catch(function(err) {
            console.log(err);
        });
    },
    methods: {
        // 点击按钮提交数据
        postApi() {
            axios.post('http://127.0.0.1:3000/', {
                item: this.item
            }).then(response => {
                console.log('\n 【API - get 数据】');
                console.log(response);
                this.items = response.data;
            }).catch(function(err) {
                console.log(err);
            });
        }
    }
});
</script>


</body>
</html>

浏览器打开 get_postDemo.html，添加几条数据。

刷新 127.0.0.1:3000，可以看到数据已经提交上去。

期待您的关注！

相关文章

  • 09_Node.js GET 与 POST 请求

    在很多场景中，我们的服务器都需要跟用户的浏览器打交道，如表单提交，表单提交到服务器一般都使用 GET/POST 请...

  • iOS请求方法和网络安全

    GET和POST请求 GET和POST请求简介 GET请求模拟登陆 POST请求模拟登陆 GET和POST的对比 ...

  • Python 网络工具包 - requests

    安装与加载 网络请求 - Request GET 请求 POST 请求 - form-data POST 请求 -...

  • iOS请求方法和网络安全

    GET和POST请求GET和POST请求简介GET请求模拟登陆POST请求模拟登陆GET和POST的对比保存用户信...

  • java发送http请求

    restTemplate get请求 post请求 apache.http.client get请求 post请求...

  • post And get

    post And get post 与 get 请求的区别： 相同点：post和get都属于tcp协议传输。 po...

  • Get和Post的区别

    Get请求和Post请求区别如下： Post请求比Get请求更安全，get请求直接将参数放置在URL中，post请...

  • 零散知识随笔记

    POST和GET的区别 跟POST与GET同级的请求还有PUT和DELETE GET请求的数据会附在URL之后，以...

  • Okhttp3

    简介 配置 请求思路 get请求思路 post请求思路 get，post 同步和异步请求 异步请求（get） 同步...

  • AJAX

    创建 XMLHttpRequest 对象 向服务器发送请求 GET 还是 POST？ 与 POST 相比，GET ...

网友评论

    本文标题：09_Node.js GET 与 POST 请求

    本文链接：https://www.haomeiwen.com/subject/zbxmjqtx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    Node.js

    关于我们|服务条款|联系我们|09_Node.js GET 与 POST 请求|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！