Node.JS的表单提交及OnceIO中接受GET/POST数据的三种方法
huayhy
7年前
<p>OnceIO 是 OnceDoc 企业私有内容(文档)管理系统的底层Web框架，它可以实现模板文件、静态文件的全缓存，运行起来完全不需要I/O操作，并且支持客户端缓存优化，GZIP压缩等（只压缩一次），拥有非常好的性能，为您节约服务器成本。它的模块化功能，可以让你的Web进行分布式存储，在一个扩展包里即可包含前端、后端和数据库定义，只需通过添加/删除目录的方式就可实现功能删减，实现真正的模块化扩展。目前 OnceIO 已经开源，这里是介绍如何使用的一系列文章。</p> <p><strong>获取GET中的QueryString数据</strong></p> <p>在互联网上, QueryString是地址的一部分, 其中包含着需要传给后台的数据，通常以?开始，以&号分割。在表单提交时，会默认以QueryString的形式向后台发送数据，OnceIO会将其存储在req.query对象上。</p> <p>在项目文件夹中创建服务器文件 websvr.js 和网页文件 form.html。</p> <p>websvr.js 的代码如下：</p> <pre> 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)) })</pre> <p>form.html 的代码如下：</p> <pre> <!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></pre> <p>运行服务器，在浏览器中打开 localhost:8054/form，得到以下结果：</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/98670386e350597af7fdbb47cca0943c.png"></p> <p>点击提交后，浏览器显示出服务器收到的包含在 req.query 中的表单数据，地址栏中的 URL 也显示了表单中所有参数的名称和值：</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/a875d7bda045f11930f4397222c36c01.png"></p> <p><strong>获取POST中的数据</strong></p> <p>GET将数据放在地址中，而地址中存放的数据量是有限的。POST则将数据存储在Request Body中。OnceIO将Post接收的数据存放在req.body中。</p> <p>将 websvr.js 文件中的 app.get('/form/get_form.asp', function(req, res)) 函数替换为：</p> <pre> //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)) })</pre> <p>将 form.html 文件中 body 里的内容替换</p> <pre> <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></pre> <p>重启服务器，在浏览器中打开 localhost:8054/form，得到以下结果：</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/c41eff9d00ae711309bf8e69a1376cfa.png"></p> <p>点击提交后，浏览器显示出服务器收到的包含在 req.body 中的表单数据，而地址栏不显示任何表单数据：</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/96bdd40624b106fb3ed68ba88cf74420.png"></p> <p><strong>获取Router中的变量及GET/POST同时使用</strong></p> <p>用户还可以将路由的一部分指定为变量，如 "/form/get_and_post_form.asp/:routeParam"。OnceIO会将routeParam变量的值存放在 req.params中。</p> <p>app.url接口可以让 GET 与 POST 同时使用。将 websvr.js 文件中的 app.post('/form/post_form.asp', function(req, res)) 函数替换为：</p> <pre> //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')</pre> <p>为减少 IO，app.url() 默认不加载 req.body，如需加载，需要把它的第三个参数设置为 'qs' 或 {POST : 'qs'}.</p> <p>将 form.html 文件中 body 里的内容替换为：</p> <pre> <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></pre> <p>这个表单同时使用了三种传送数据的方法：在表单的 action 属性中以 '/' 分隔开 URL 参数将其传送到 req.params 中；在表单的 action 属性中以 '?' 标示 URL 参数将其传送到 req.query 中；用 POST 方式将表单内的输入项传送到 req.body 中。</p> <p>重启服务器，在浏览器中打开 localhost:8054/form，得到以下结果：</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/216921e6f8da45d199b39356e4471fe8.png"></p> <p>点击提交后，页面显示出服务器收到的分别包含在 req.params，req.query 和 req.body 中的表单数据，而地址栏中的 URL 只显示了 req.params 和 req.query 中的数据：</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/f5262842400bb7bfbdd3078347278e97.png"></p> <p> </p> <p> </p> <p>来自：http://ourjs.com/detail/5817520371e01c68e9619141</p> <p> </p>