|
|
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;
...........进行数据的处理，通过写好的数据接口插入数据.........
}
好了整个过程就结束了，是不是非常的简单，对就是这么简单 |
|
|
QQ群⑧：
窥视卡
雷达卡
发表于 2017-2-24 12:14:44
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡