原生 Nodejs 获取 post 提交数据

首先创建并初始化一个node应用,根路由使用index.ejs模板

var Koa=require('koa')
var router = require('koa-router')()
var views = require('koa-views') var app=new Koa();
app.use(views('views',{
extension:'ejs'
})) router.get('/',async (ctx)=>{
await ctx.render('index');
}) app.use(router.routes());
app.use(router.allowedMethods());
app.listen(3000);

在views目录下创建一个index.ejs模板(注意需要安装ejs插件) ,跟配置模板的路劲一致

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="/doAdd" method="post">
用户名: <input type="text" name="username"/>
<br/>
<br/>
密 码: <input type="password" name="password"/>
<br/>
<br/>
<button type="submit">提交</button>
</form>
</body>
</html>

然后启动node应用,并且浏览器访问

当在浏览器端输入了这两个输入框点提交后,node应用接收传过来的数据,封装一个获取数据的方法,并且在app.js引用

exports.getPostData=function(ctx){
//获取数据 异步
return new Promise(function(resolve,reject){
try{
let str='';
ctx.req.on('data',function(chunk){
str += chunk;
}) ctx.req.on('end',function(chunk){
resolve(str)
})
}catch(err){
reject(err)
}
})
}
var Koa=require('koa')
var router = require('koa-router')()
var views = require('koa-views')
var common = require('./module/common') var app=new Koa();
app.use(views('views',{
extension:'ejs'
})) router.get('/',async (ctx)=>{
await ctx.render('index');
}) router.post('/doAdd', async (ctx) => {
var data = await common.getPostData(ctx)
console.log(data)
ctx.body = data // 提交完成后给浏览器响应的数据
}) app.use(router.routes());
app.use(router.allowedMethods());
app.listen(3000);

重启服务后,浏览器端在两个输入框中输入数据点击提交,下面看到的乱码是因为中文,提交的时候要记得处理一下

Koa 中 koa-bodyparser 中间件的使用

首先需要在项目中安装这个插件

npm install --save koa-bodyparser

在项目中引入这个插件,并且需要配置post bodyparser的中间件

var Koa=require('koa')
var router = require('koa-router')()
var views = require('koa-views')var bodyParser = require('koa-bodyparser') var app=new Koa();
app.use(views('views',{
extension:'ejs'
})) //配置post bodyparser的中间件
app.use(bodyParser()); router.get('/',async (ctx)=>{
await ctx.render('index');
}) router.post('/doAdd', async (ctx) => {
console.log(ctx.request.body);
ctx.body = ctx.request.body; //获取表单提交的数据
}) app.use(router.routes());
app.use(router.allowedMethods());
app.listen(3000);

重启服务后,浏览器访问并且输入数据提交,可以看到这个插件将我们获取到的数据转成了一个对象

该插件已经帮你解决了中文乱码的问题,不信你试试输入中文看看结果

koa post提交数据,koa-bodyparser中间件来获取post提交数据的更多相关文章

  1. springboot框架中集成thymeleaf引擎,使用form表单提交数据,debug结果后台获取不到数据

    springboot框架中集成thymeleaf引擎,使用form表单提交数据,debug结果后台获取不到数据 表单html: <form class="form-horizontal ...

  2. nodejs数据接收body-parser中间件

    给大家翻译一下npm上body-parser的资料 nodejs 的body数据解析中间件 插件作用:对于req.body属性,在操作数据前分析进来的请求体的插件 首先学习解析一个http处理 这篇文 ...

  3. 速战速决 (6) - PHP: 获取 http 请求数据, 获取 get 数据 和 post 数据, json 字符串与对象之间的相互转换

    [源码下载] 速战速决 (6) - PHP: 获取 http 请求数据, 获取 get 数据 和 post 数据, json 字符串与对象之间的相互转换 作者:webabcd 介绍速战速决 之 PHP ...

  4. 3、KOA模板引擎+访问静态资料中间件

    一.Koa模板引擎初识1.安装中间件 : npm i --save koa-views2.安装ejs模板引擎 :npm i --save ejs3.编写模板:<%= title %> 是调 ...

  5. 使用node.js的bodyParser中间件读取post数据解析

    昨天我们使用的网关转发数据时出了点问题! 情景是这样的,另一方以Post的形式向我的node.js服务推送JSON数据.但是使用bodyParser中间件后,在req.body中拿不到任何信息. 代码 ...

  6. bodyParser中间件的研究

    原文链接: bodyParser中间件 bodyParser中间件用来解析http请求体,是express默认使用的中间件之一. 使用express应用生成器生成一个网站,它默认已经使用了 bodyP ...

  7. Express bodyParser中间件使用方式

    bodyParser中间件用来解析http请求体,是express默认使用的中间件之一. 1.这个模块提供以下解析器 (1) JSON body parser (2) Raw body parser ...

  8. express第三方中间件研究之bodyParser中间件

    转载至:http://www.cnblogs.com/lianer/p/5178693.html 接触nodejs已有一段时间了,但最近才开始落实项目,于是使用express应用生成器生成了一个应用. ...

  9. Koa框架教程,Koa框架开发指南,Koa框架中文使用手册,Koa框架中文文档

    我的博客:CODE大全:www.codedq.net:业余草:www.xttblog.com:爱分享:www.ndislwf.com或ifxvn.com. Koa -- 基于 Node.js 平台的下 ...

随机推荐

  1. Django:内置组件Content-Type

    12.Django组件之Content_Type 1.帮助我们生成了一张表,里面有所有表名.这样不再自建表在表中填表名,用Foreignkey获取 2.为了让我们快速进入插入数据,填写一个字段Gene ...

  2. margin 外边距合并问题

    一.兄弟元素的外边距合并 效果图如下:(二者之间的间距为100px,不是150px) 二.嵌套元素的外边距合并 对于两个嵌套关系的元素,如果父元素中没有内容或者内容在子元素的后面并且没有上内边距及边框 ...

  3. C#与.net 入门

    C# 语言和 .NET Framework 介绍 https://docs.microsoft.com/zh-cn/dotnet/csharp/getting-started/introduction ...

  4. eclipse如何为java项目生成API文档

    文章转载自: https://www.cnblogs.com/wdh1995/p/7705494.html 当我们的项目很大,编写了很多代码的时候,就需要生成一个标准的API文档,让后续的开发人员,或 ...

  5. Mac FFmpeg编译和解决nasm/yasm not found or too old错误

    FFmpeg编译下载代码:git clone https://git.ffmpeg.org/ffmpeg.git然后输入命令进行编译:找到下载的目录下,然后用命令进入这个文件夹下cd ffmpeg,然 ...

  6. beta版本——第三次冲刺

    第三次冲刺 (1)SCRUM部分☁️ 成员描述: 姓名 李星晨 完成了哪个任务 认证学校那一栏增加检测机制的ui设计 花了多少时间 1h 还剩余多少时间 1h 遇到什么困难 没有困难 这两天解决的进度 ...

  7. Spring Boot-初学01 -使用Spring Initializer快速创建Spring Boot项目 -@RestController+spEL -实现简单SpringBoot的Web页面

    1.IDEA:使用 Spring Initializer快速创建项目 IDE都支持使用Spring的项目创建向导快速创建一个Spring Boot项目: 选择我们需要的模块:向导会联网创建Spring ...

  8. 《BUG创造队》第九次团队作业:Beta冲刺与验收准备

    项目 内容 这个作业属于哪个课程 2016级软件工程 这个作业的要求在哪里 实验十三 团队作业9:Beta冲刺与团队项目验收 团队名称 BUG创造队 作业学习目标 (1)掌握软件黑盒测试技术:(2)学 ...

  9. 我理解的Linux内存管理

    众所周知,内存管理是Linux内核中最基础,也是相当重要的部分.理解相关原理,不管是对内存的理解,还是对大家写用户态代码都很有帮助.很多书上.很多文章都写了相关内容,但个人总觉得内容太复杂,不是太容易 ...

  10. jq function return value

    所有 JS  函数 都会返回值 假如 没有 return  则返回 undefined