前端页面 .html 生成一个动态模块 Modal
<div class="modal fade" id="addStaff" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Add Staff Account</h4>
</div>
<div class="modal-body">
<form action="/stores/addstaff" method="POST" data-parsley-validate id="staff-form" enctype="multipart/form-data">
<div class="row">
<div class="col-md-6">
<label>First Name</label>
<input type="text" class="form-control" id="firstName" name="firstName" required>
</div>
<div class="col-md-6">
<label>Last Name</label>
<input type="text" class="form-control" id="lastName" name="lastName" required>
</div>
</div>
<div >
<label>Email Address</label>
<input type="email" class="form-control" id="staffEmail" name="staffEmail" required>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" onclick="sendStaffInvite()" class="btn btn-primary">Send Invite</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
Jquery提交表单Form
function sendStaffInvite(){
$("#staff-form").submit();
}
Node.js (express框架)后端创建路由 /stores/addstaff
下面代码在routes/stores.js下,可以直接定义addstaff,并接受post请求
app.post(['/addstaff'], function (req, res) {
console.log(req.body);
});
打印出来req.body 如下图
前端的值已经传入后端 然后可以通过需求写相应功能、写回调函数等等。