表单数据的提交和处理——实例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