原生 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);
重啟服務后，瀏覽器訪問並且輸入數據提交，可以看到這個插件將我們獲取到的數據轉成了一個對象
該插件已經幫你解決了中文亂碼的問題，不信你試試輸入中文看看結果
