Express全系列教程之(四):获取Post参数的两种方式
一、关于POST请求
post方法作为http请求很重要的一部分,几乎所有的网站都有用到它,与get不同,post请求更像是在服务器上做修改操作,它一般用于数据资源的更新。
相比于get请求,post所请求的数据会更加安全。上一章中我们发现get请求会在地址栏显示输入的用户名和密码(有中文时会转化为BASE64加密),而post请求则会将数据放入http包的包体中,这使得别人无法直接看到用户名和密码!
二、Express如何设置POST请求
1.我们的知道,首先我们得知道在form表单进行post请求,enctype属性一般设置为“application/x-www-form-urlencoded”,如果设置成multipart/form-data,则多用于文件上传,如下:
<form action="#" method="post" enctype="application/x-www-form-urlencoded">
</form>
之后,我们可以使用npm提供的body-parser或者connect-multiparty来获取post数据。我也会把两种方式都进行演示:
(1)、body-parser
Express中默认都使用body-parser作为请求体解析post数据,这个模块也能解析:JSON、Raw、文本、URL-encoded格式的请求体。
首先在项目目录安装body-parser:
cnpm install body-parser --save
在项目app.js中,引用和设置该模块:
const bodyParser=require("body-parser");
// 解析以 application/json 和 application/x-www-form-urlencoded 提交的数据
var jsonParser = bodyParser.json();
var urlencodedParser = bodyParser.urlencoded({ extended: false });
bodyParser.json()很明显是将json作为消息主题,再且常见的语言和浏览器大都支持json规范,使得json处理起来不会遇上兼容性问题。
application/x-www-form-urlencoded:
如果form表单不设置enctype属性,那么他默认就会是这种。
之后获取数据:
app.post("/",urlencodedParser,function(req,res){
res.send(req.body);
});
在中间添加urlencodedParser,请求是依然使用req.body获取数据。
下面是一个完整的实例:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="http://localhost:8080/" method="post" enctype="application/x-www-form-urlencoded">
用户:
<input type="text" name="user" id="user" placeholder="用户名"><br>
密码:
<input type="password" name="password" id="password" placeholder="密码"/><br>
<input type="submit" value="提交"/>
</form>
</body>
</html>
app.js:
const express=require("express");
const bodyParser=require("body-parser");
var app=express();
// 解析application/json数据
var jsonParser = bodyParser.json();
// 解析application/x-www-form-urlencoded数据
var urlencodedParser = bodyParser.urlencoded({ extended: false });
app.post('/',urlencodedParser,function(req,res){
res.send(req.body);
});
app.listen(8080);
(2)、connect-multiparty
虽然connect-multiparty多用于文件上传,但也可以访问到post请求的数据,先安装
cnpm install connect-multiparty --save
再引入和构建函数:
const multipart = require('connect-multiparty');
var multipartMiddleware = multipart();
```
同样我们也采用req.body来获取参数:
```
app.post('/',multipartMiddleware,function(req,res){
res.send(req.body);
});
完整的:
const express=require("express");
const multipart = require('connect-multiparty');
var multipartMiddleware = multipart();
var app=express();
app.post('/',multipartMiddleware,function(req,res){
res.send(req.body);
});
app.listen(8080);
相比于body-parser,代码量似乎更少一些,但我还是建议使用body-parser,根据官方说法,他会在服务器上创建临时文件,并且永远不会去清理它们,这会相当两会系统资源,所以不到万不得已请不要去使用它。
总结
post数据在网页开发时经常使用,请务必掌握它,只有这样网页的交互设计才能够做到游刃有余,今天就到这里,也希望大家以后多多支持。
Express全系列教程之(四):获取Post参数的两种方式的更多相关文章
- Spring Boot2 系列教程(十五)定义系统启动任务的两种方式
在 Servlet/Jsp 项目中,如果涉及到系统任务,例如在项目启动阶段要做一些数据初始化操作,这些操作有一个共同的特点,只在项目启动时进行,以后都不再执行,这里,容易想到web基础中的三大组件( ...
- HttpServletRequest request 获取form参数的两种方式
@RequestMapping(value="/pay",method = RequestMethod.POST) public String buildRequest(HttpS ...
- Android实战简易教程-第四十九枪(两种方式实现网络图片异步加载)
加载图片属于比较耗时的工作,我们需要异步进行加载,异步加载有两种方式:1.通过AsyncTask类进行:2.通过Handler来实现,下面我们就来看一下如何通过这两种方式实现网络图片的异步加载. 一. ...
- flask获取传入参数的两种方式
#coding=utf-8 from flask import Flask from flask import request app = Flask(__name__) @app.route(&qu ...
- php获取post参数的几种方式 RPC 规定接收取值方式 $GLOBALS['HTTP_RAW_POST_DATA'];
http://www.cnblogs.com/zhepama/p/4022606.html PHP默认识别的数据类型是application/x-www.form-urlencoded标准的数据类型. ...
- strus2中获取表单数据 两种方式 属性驱动 和模型驱动
strus2中获取表单数据 两种方式 属性驱动 和模型驱动 属性驱动 /** * 当前请求的action在栈顶,ss是栈顶的元素,所以可以利用setValue方法赋值 * 如果一个属性在对象栈,在页面 ...
- php获取post参数的几种方式
php获取post参数的几种方式 1.$_POST['paramName'] 只能接收Content-Type: application/x-www-form-urlencoded提交的数据 2.fi ...
- spring mvc获取路径参数的几种方式 - 浅夏的个人空间 - 开源中国社区
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- 使用web.xml方式加载Spring时,获取Spring context的两种方式
使用web.xml方式加载Spring时,获取Spring context的两种方式: 1.servlet方式加载时: [web.xml] <servlet> <servlet-na ...
随机推荐
- vue中怎么实现获取当前点击对象this
应用场景 在评论列表中,有很多条评论(通过循环出来的评论列表),评论的文字有多跟少,默认展示2行超出显示点击查看更多,,要点击查看更多对当前的这条评论进行全部评论展示! 问题描述 要是在传统的点击事件 ...
- CSP应用开发-CryptAPI函数库介绍
基本加密函数为开发加密应用程序提供了足够灵活的空间.所有CSP的通讯都是通过这些函数.一个CSP是实现所有加密操作的独立模块.在每一个应用程序中至少需要提供一个CSP来完成所需的加密操作.如果使用多于 ...
- sass 工具库
github : https://github.com/uustoboy/base_mixins ( 有坑慎用 ) 项目截图: _base_mixins.scss 混合宏的引入文件; _setting ...
- ROS-十步完成ROS-indigo安装
Ubuntu 版本是14.04.5.(这个版本的ubuntu的内核是V4.4的内核,长期维护到2019年,是14代比较稳定的,反正用这个安装就没有什么依赖的头疼的问题,安装ROS很方便,可以去清华的网 ...
- 【原创】大数据基础之Drill(2)Drill1.14+Hive2.1.1运行
问题 Drill最新版本是1.14,从1.13开始Drill支持hive的版本升级到2.3.2,详见1.13的release notes The Hive client for Drill is up ...
- Scrapy-redis 分布式
分布式:架构方式 多台真实机器+爬虫(如requests,scrapy等)+任务共享中心 多台虚拟机器(或者部分虚拟部分真实)+爬虫(如requests,scrapy等)+任务共享中心 多台容器级虚拟 ...
- 简单几步让网站支持https,windows iis下https配置方式
1.https证书的分类 SSL证书没有所谓的"品质"和"等级"之分,只有三种不同的类型.SSL证书需要向国际公认的证书证书认证机构(简称CA,Certific ...
- SQL 性能优化 总结
SQL 性能优化 总结 (1)选择最有效率的表名顺序(只在基于规则的优化器中有效): ORACLE的解析器按照从右到左的顺序处理FROM子句中的表名,FROM子句中写在最后的表(基础表 driving ...
- Java _类 相关知识
成员变量 java对象的属性就是成员变量,其实成员变量就是指普通的变量,可以设置初始值,也可以不设置.当不设置时,会被设置为默认值.(当成员变量前面有private关键词时,说明定义了一个私有成员) ...
- OpenStack共享组件
一.云计算的前世今生 1.物理机架构,应用部署和运行在物理机上 2.虚拟化架构,物理机上运行若干虚拟机,应用系统直接部署到虚拟机上 3.云计算架构,虚拟化提高了单台物理机的资源使用率 二.Open ...