OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

Node.JS的表单提交及OnceIO中接受GET/POST数据的三种方法


分享到
分类 JS学习   关键字 JavaScript   发布 ourjs  1477923331417
注意 转载须保留原文链接,译文链接,作者译者等信息。  

OnceIOOnceDoc企业私有内容(网盘)管理系统的底层Web框架,它可以实现模板文件、静态文件的全缓存,运行起来完全不需要I/O操作,并且支持客户端缓存优化,GZIP压缩等(只压缩一次),拥有非常好的性能,为您节约服务器成本。它的模块化功能,可以让你的Web进行分布式存储,在一个扩展包里即可包含前端、后端和数据库定义,只需通过添加/删除目录的方式就可实现功能删减,实现真正的模块化扩展。目前OnceIO已经开源,这里是介绍如何使用的一系列文章。

 

获取GET中的QueryString数据

在互联网上, QueryString是地址的一部分, 其中包含着需要传给后台的数据,通常以?开始,以&号分割。在表单提交时,会默认以QueryString的形式向后台发送数据,OnceIO会将其存储在req.query对象上。

在项目文件夹中创建服务器文件 websvr.js 和网页文件 form.html。

websvr.js 的代码如下:

var onceio = require('../onceio/onceio')

var app = onceio({
    home   :  "./"
  , port   :  8054
  , listDir:  true
  , debug  :  false
})

app.get('/form', function(req, res) {
  res.render('form.html')
})

//Handling form-data sent through the GET method
app.get('/form/get_form.asp', function(req, res) {
  res.write('Received the form-data:\n')
  res.send('req.query: ' + JSON.stringify(req.query))
})  

form.html 的代码如下:

<!DOCTYPE html>
<body>
  <p>Form that sends data through the GET method:</p>
  <form action="/form/get_form.asp" method="get">
    <p>Parameter 1: <input type="text" name="param1" value="GET1" /></p>
    <p>Parameter 2: <input type="text" name="param2" value="GET2" /></p>
    <input type="submit" value="Submit" />
  </form>
</body>
</html> 

运行服务器,在浏览器中打开 localhost:8054/form,得到以下结果:

GET

点击提交后,浏览器显示出服务器收到的包含在 req.query 中的表单数据,地址栏中的 URL 也显示了表单中所有参数的名称和值:

GET

获取POST中的数据

GET将数据放在地址中,而地址中存放的数据量是有限的。POST则将数据存储在Request Body中。OnceIO将Post接收的数据存放在req.body中。

将 websvr.js 文件中的 app.get('/form/get_form.asp', function(req, res)) 函数替换为:

//Handling form-data sent through the POST method
app.post('/form/post_form.asp', function(req, res) {
  res.write('Received the form-data:\n')
  res.send('req.body: ' + JSON.stringify(req.body))
})  

将 form.html 文件中 body 里的内容替换

<p>Form that sends data through the POST method:</p>
<form action="/form/post_form.asp" method="post">
  <p>Parameter 1: <input type="text" name="param1" value="POST1" /></p>
  <p>Parameter 2: <input type="text" name="param2" value="POST2" /></p>
  <input type="submit" value="Submit" />
</form> 

重启服务器,在浏览器中打开 localhost:8054/form,得到以下结果:

POST

点击提交后,浏览器显示出服务器收到的包含在 req.body 中的表单数据,而地址栏不显示任何表单数据:

POST

获取Router中的变量及GET/POST同时使用

用户还可以将路由的一部分指定为变量,如 "/form/get_and_post_form.asp/:routeParam"。OnceIO会将routeParam变量的值存放在 req.params中。

app.url接口可以让 GET 与 POST 同时使用。将 websvr.js 文件中的 app.post('/form/post_form.asp', function(req, res)) 函数替换为:

//Handling form-data sent through the GET method and the POST method
app.url('/form/get_and_post_form.asp/:routeParam', function(req, res) {
  res.write('Received the form-data:\n')
  res.write('req.params: ' + JSON.stringify(req.params) + '\n')
  res.write('req.query: ' + JSON.stringify(req.query) + '\n')
  res.send('req.body: ' + JSON.stringify(req.body))
}, 'qs')  

为减少 IO,app.url() 默认不加载 req.body,如需加载,需要把它的第三个参数设置为 'qs' 或 {POST : 'qs'}.

将 form.html 文件中 body 里的内容替换为:

<p>Form that sends data through the GET method and the POST method:</p>
<form action="/form/get_and_post_form.asp/ROUTE/?getParam=GET" method="post">
  <p>POST Parameter 1: <input type="text" name="postParam1" value="POST1" /></p>
  <p>POST Parameter 2: <input type="text" name="postParam2" value="POST2" /></p>
  <input type="submit" value="Submit" />
</form> 

这个表单同时使用了三种传送数据的方法:在表单的 action 属性中以 '/' 分隔开 URL 参数将其传送到 req.params 中;在表单的 action 属性中以 '?' 标示 URL 参数将其传送到 req.query 中;用 POST 方式将表单内的输入项传送到 req.body 中。

重启服务器,在浏览器中打开 localhost:8054/form,得到以下结果:

GETPOST

点击提交后,页面显示出服务器收到的分别包含在 req.params,req.query 和 req.body 中的表单数据,而地址栏中的 URL 只显示了 req.params 和 req.query 中的数据:

GETPOST

 

 

上一篇: OnceIO(Node.JS)中安装、使用和更换doT、EJS、pug等模板引擎

原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 阿里任性Hr开除月饼极客:这样冰冷的公司没什么值得我留恋
  2. GitHub2016报告AngularJS流行度下降,JavaScript活跃度为Java两倍
  3. 在 2016 年学 JavaScript 是一种什么样的体验?
  4. 2016年收入最高的5个编程语言,JavaScript最流行,Java和C没在前5
  5. 传言GITHUB正在寻求第二轮融资,或面临估值下降、清算或被微软收购
  6. JavaScript函数式编程(一、二、三)
  7. Java 之父求职被嫌年纪大,硅谷公司现在喜欢“小鲜肉”,不爱“老古董”
  8. NodeJS中的Middleware是什么?在OnceIO中创建和使用中间件
  9. OnceIO(Node.JS)中的模板引擎是什么及MVC设计模式的使用与实现
  10. 用OnceIO(NodeJS)搭建简单的web服务器
  11. AirJD-简单好用的免费建站工具

 相关阅读 - JS学习
  1. OnceIO(Node.JS)中安装、使用和更换doT、EJS、pug等模板引擎
  2. OnceIO(Node.JS)中的模板引擎是什么及MVC设计模式的使用与实现
  3. NodeJS中的Middleware是什么?在OnceIO中创建和使用中间件
  4. 用OnceIO(NodeJS)搭建简单的web服务器
  5. JavaScript函数式编程(一、二、三)
  6. JavaScript在物联网中的应用
  7. 如何编写 jQuery 插件
  8. NodeJS中npm3相对于npm2模块依赖目录层欠的改进
  9. JavaScript的 Event Loop 模型
  10. You Don't Need jQuery

 关键字 - JavaScript
  1. 少年,不要滥用箭头函数啊:JS中lambda表达式的优缺点和使用场景
  2. 什么是Ajax? 详解原生js ajax
  3. 用原生HTML5控件实现输入框自动提示(下拉列表补全)功能
  4. NodeBots-JavaScript在智能设备驱动(物联网)中的崛起
  5. decodeURIComponent有个BUG,当浏览器请求地址含%+数字时,会解析错误
  6. Linux下用node.js提取Word(doc/docx)/PDF文本内容
  7. JavaScript的设计缺陷?浮点运算:0.1 + 0.2 != 0.3
  8. 用JavaScript获取当月第一天和最后一天
  9. JavaScript中NaN的秘密
  10. JavaScript也有getter/setter方法:ES5 Object对象的5个不为人知的特性

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号