表单数据的提交和处理——实例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;
 
...........进行数据的处理，通过写好的数据接口插入数据.........

}

好了整个过程就结束了，是不是非常的简单，对就是这么简单