Node.JS的表單提交及OnceIO中接受GET/POST數據的三種方法

huayhy 8年前發布 | 10K 次閱讀 Node.js Node.js 開發

OnceIO 是 OnceDoc 企業私有內容(文檔)管理系統的底層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,得到以下結果:

點擊提交后,瀏覽器顯示出服務器收到的包含在 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 中的數據:

 

 

來自:http://ourjs.com/detail/5817520371e01c68e9619141

 

 本文由用戶 huayhy 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!