表單數據的提交和處理——實例2


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;
 
...........進行數據的處理,通過寫好的數據接口插入數據.........

}

 好了整個過程就結束了,是不是非常的簡單,對就是這么簡單

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM