Nodjs中的表單數據的提交流程實際上非常的簡單,總共有如下幾步:
1⃣️ 表單web界面
<form id="envForm" class='form-horizontal' data-toggle='validate'> ......... 下拉選擇框 <div class="col-lg-7"> <select name="name_1" class="form-control input-sm" data-rule-required='true'> <option value="testing">測試環境</option> <option value="online">線上環境</option> </select> </div> 輸入框 <div class="col-lg-7"> <input name="name_2" type="text" class="form-control input-sm" data-rule-required='true'/> </div> 下拉選擇框 <select name="name_3" class="form-control input-sm"> <option value="center">中心</option> <option value="unit">單元</option> <option value="yununit">雲單元</option> </select> 為了提交數據,可以將具有hide屬性值得<input>標簽放入<form>標簽中 ......... </form>
問題:有一個問題一定要明確,當我們不使用ajax提交數據的時候,提交表單時type=“submit”屬性是一定需要的,
因為這樣編譯器就已經封裝了向服務器發送數據的方法,不再用我們自己編寫提交數據的方法。當點擊提交按鈕之后,
編譯器自動將所有帶有type="submit"屬性的標簽的 (name,value)提取出來,組成Json串發送到服務器,
就像下面這樣:
<html> <body> <form action="/example/html/form_action.asp" method="get"> <p>First name: <input type="text" name="fname" /></p> <p>Last name: <input type="text" name="lname" /></p> <input type="submit" value="Submit" /> </form> <p>請單擊確認按鈕,輸入會發送到服務器上名為 "form_action.asp" 的頁面。</p> </body> </html>
提交后當前頁面跳轉到form的action所指向的頁面。然而,很多時候我們並不希望提交表單后頁面跳轉,那么,我們就可以使用ajax來提交數據
我們要介紹的方法也正是使用ajax技術提交數據,好了接着說
2⃣️ 通過JQuery和Ajax技術向Nodejs服務器提交表單數據
$('頁面中的某個按鈕等標簽').on('click',function(){ $.ajax({ type: "post", url: '/config/scm/env/add', data: $("#envForm").serialize(), dataType: 'json', success: function (data) { if (data.errorMsg) { $.alert("錯誤", data.errorMsg); } else { $('.edit-env-modal').modal('hide'); $.toast("保存環境成功,正在刷新...", "success", "center"); window.location.reload(); } }, error: function (e) { $.alert("失敗", e); }, complete: function (XMLHttpRequest, textStatus) { $('.submitEnvModal').attr('disabled', false); $('select[name="type"]').attr('disabled', false); } }); })
注意其中的
type: "post",
url: '/config/scm/env/add',
data: $("#envForm").serialize(),
dataType: 'json',
指明了向服務器發送請求的類型,指明了NodeJs應該響應的路由url,以及要提交哪個表單數據,
serialize()方法會將指定的<form>表單中的<input>/<select>標簽的name屬性和屬性值封
裝成Json串,之后發送給Nodejs服務器
這個data非常的靈活,在這里我們處理的是表單,提交的是表單數據,但是更普遍的是,只要是
Json串數據就能進行傳輸,所以可以是一下這樣:
type:"post",
url:'/config/scm/env/add'
data: {
'title': title,
'content': content
},
dataType:'json'
3⃣️ NodeJs的Router路由響應Post請求
router.post('/config/scm/env/add', configController.scmAddEnv);
4⃣️ NodeJs的controller中的相應的方法對提交的數據進行處理
(數據的處理和數據插入數據庫中就不再解釋,僅看NodeJs服務器如何從response參數據中獲取提交的數據)
exports.scmAddEnv = function (req, res, next) { var env = {}; env['name_1'] = req.body.name_1; env['name_2'] = req.body.name_2; env['name_3'] = req.body.name_3; ...........進行數據的處理,通過寫好的數據接口插入數據......... }
好了整個過程就結束了,是不是非常的簡單,對就是這么簡單