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

OnceIO 是 OnceDoc 企业私有内容(文档)管理系统的底层Web框架,它可以实现模板文件、静态文件的全缓存,运行起来完全不需要I/O操作,并且支持客户端缓存优化,GZIP压缩等(只压缩一次),拥有非常好的性能,为您节约服务器成本。它的模块化功能,可以让你的Web进行分布式存储,在一个扩展包里即可包含前端、后端和数据库定义,只需通过添加/删除目录的方式就可实现功能删减,实现真正的模块化扩展。目前 OnceIO 已经开源,本文主要介绍node.js语言中的表单提交及OnceIO中接受GET/POST数据的三种方法,一起来看看吧。

获取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 的代码如下:

<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,得到以下结果:

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

获取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,得到以下结果:

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

获取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,得到以下结果:

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

文章来源:OurJS

时间: 2024-12-26 08:36:01

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

【转载】[JS]让表单提交返回后保持在原来提交的位置上

有时候,在网页中点击了页面中的按钮或是刷新了页面后,页面滚动条又 会回到顶部,想看后面的记录就又要拖动滚动条,或者要按翻页键,非常不方便,想在提交页面或者在页面刷新的时候仍然保持滚动条的位置不变,最好的办法就是 在JS中用cookie记录下当前滚动条的位置,然后刷新时读取cookie就可以实现这个功能了.代码如下:<script type="text/javascript"> function Trim(strValue) { //return strValue.repla

angular js 实现表单提交时下面的table获取到表单里面的数据

angular js 实现表单提交时下面的table获取到表单里面的数据<!DOCTYPE html><html ><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css"/> <s

jquery.form.js 让表单提交更优雅

jquery.form.js 让表单提交更优雅.可以页面不刷新提交表单,比jQuery的ajax提交要功能强大. 1.引入 <script src="/src/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="/src/jquery.form.js"></script> 2.使用 $(function () { va

ajax form表单提交 input file中的文件

ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了解决这个问题我走了不少弯路: 1.用原生的 input file , 不支持ajax上传文件,你肯定会说可以用 ajax form表单上传了呀?不过我后面还要调用上传成功后用js处理一些对话框,所以这种方法排除 2.用了 uploadify 上传插件,弄出来能上传东西,结果不理想:因为不能判断上传的

【转】表单提交及关闭当前页面并刷新数据

在DWZ文档中,对于DWZ框架Ajax无刷新表单提交处理流程描述如下: 1.       ajax表单提交给服务器 2.       服务器返回一个固定格式json结构 3.       js会调函数根据这个json数据做相应的处理 注意: DWZ框架默认的ajax表单提交都是返回json数据,告诉客户端操作是否成功,成功或失败提示信息,以及成功后的处理方式(刷新某个navTab或关闭某个navTab或navTab页面跳转). 表单提交后服务器操作失败了,客户端接收statusCode和mess

js(20140517)在JS方法中返回多个值的三种方法

在JS方法中返回多个值的三种方法 在使用JS编程中,有时需要在一个方法返回两个个或两个以上的数据,用下面的几种方法都可以实现: 1 使用数组的方式,如下: <html> <head> <title>JS函数返回多个值--oec2003</title> </head> <body> <input type="button" onclick="getNames()" value="t

js阻止表单提交

<!DOCTYPE html><html><head>    <title>Simple Login Form</title>    <meta charset="UTF-8" />    <meta name="Designer" content="PremiumPixels.com">    <meta name="Author" c

js 在表单提交前进行操作

最近在写页面的时候,需要手动写一些在表单进行提交前的验证操作,正好看到了2种阻止表单提交的方法,可以进行一些逻辑处理 方法一:使用return false 原生js写法: <form id="loginForm" name="loginForm" action="login.aspx" method="post"> <button type="submit" value="Sub

使用Jquery.form.js ajax表单提交插件弹出下载提示框

现象: 使用jquery的from做ajax表单提交的时候,后台处理完毕返回json字符串,此时浏览器提示下载一个json文件而不是在success里面继续解析该json对象. 具体的原因: 浏览器兼容性的问题.在谷歌和火狐下没这个问题,我用的ie9测试是有这个问题的.具体的详细我参照的该链接: http://zhidao.baidu.com/link?url=uTXondC9ECEfdObEWbq7V2O7-UW_oXtoVcneVqH_Dmj2hUXjM3y6wMFnQYsUupdWC0Tf