<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模态框-form表单</title>
<!-- 自适配手机屏幕 initial-scale=1 支持缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ajax</title>
<!-- 引入 css -->
<link rel="stylesheet" type="text/css" href="/static/bootstrap3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/static/bootstrap-table/dist/bootstrap-table.min.css">
<link rel="stylesheet" type="text/css" href="/static/toastr/toastr.min.css">
<link rel="stylesheet" type="text/css" href="/static/bootstrap-select/dist1.12.4/css/bootstrap-select.min.css">
<link href="/static/bootstrap-formvalidation/dist/css/formValidation.min.css" rel="stylesheet">
<!-- 引入 js jquery必须先引入 -->
<script type="text/javascript" src="/static/jquery-3.2.1/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/static/bootstrap3.4/js/bootstrap.min.js"></script>
<!-- 引入 bootstrap-table 2个 js -->
<script type="text/javascript" src="/static/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/static/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
<!-- 引入 boot-box2个 js用作模态框 -->
<script type="text/javascript" src="/static/boot-box/bootbox.min.js"></script>
<script type="text/javascript" src="/static/boot-box/bootbox.locales.min.js"></script>
<!-- 引入toastr js -->
<script type="text/javascript" src="/static/toastr/toastr.min.js"></script>
<!-- 引入select js -->
<script type="text/javascript" src="/static/bootstrap-select/dist1.12.4/js/bootstrap-select.min.js"></script>
<!-- 引入form表单验证的 js -->
<script type="text/javascript" src="/static/bootstrap-formvalidation/dist/js/formValidation.js"></script>
<script type="text/javascript" src="/static/bootstrap-formvalidation/dist/js/framework/bootstrap.js"></script>
<script type="text/javascript" src="/static/bootstrap-formvalidation/dist/js/language/zh_CN.js"></script>
<script>
$.fn.serializeJson = function () {
var obj = {};
var arr = this.serializeArray();
$.each(arr, function () {
if (obj[this.name]) {
if (!obj[this.name].push) {
// 判断有没有push方法，如果没有就变Array数组
obj[this.name] = [obj[this.name]];
}
obj[this.name].push(this.value || '');
} else {
obj[this.name] = this.value || '';
}
});
return obj;
};
</script>
</head>
<body>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">新增项目</h4>
</div>
<div class="modal-body" >
<form class="form-horizontal" id="modal-form">
<div class="form-group">
<label for="project" class="col-md-3 control-label">项目名称:</label>
<div class="col-md-8">
<input type="text" class="form-control" name="project" id="project" placeholder="请输入项目名称">
</div>
</div>
<div class="form-group">
<label for="desc" class="col-md-3 control-label">项目描述:</label>
<div class="col-md-8">
<textarea class="form-control" name="desc" id="desc" placeholder="请输入项目名称"></textarea>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button id="btn-default" type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button id="btn-success" type="button" class="btn btn-primary">确定</button>
</div>
</div>
</div>
</div>
<div class="container">
<!-- 触发模态框 按钮 -->
<button class="btn btn-success" id="btn_add" data-toggle="modal" data-target="#myModal">新增</button>
</div>
</body>
<script>
function validate_form() {
$('#modal-form').formValidation({
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
project: {
message: '项目名称校验不通过',
validators: {
notEmpty: {message: '不能为空'},
}
},
desc: {
message: '项目描述校验不通过',
validators: {
notEmpty: {message: '不能为空'},
}
},
}
})}
$(function () {
validate_form('#modal-form');
//点击确定按钮执行函数
$('#btn-success').click(function () {
var bv = $('#modal-form').data('formValidation');
bv.validate();
if (bv.isValid()) {
console.log('检验成功');
$.ajax({
url: '/api/form/',
type: 'post',
contentType: 'application/json',
data: JSON.stringify($('#modal-form').serializeJson()),
success: function (result, status, xhr) {
console.log("成功" + result +status + xhr);
$('#myModal').modal('hide');
$('#modal-form')[0].reset();
$('#modal-form').data('formValidation').destroy();
$('#modal-form').data('formValidation',null);
validate_form('#modal-form');
},
error: function (xhr, status, error) {
console.log("失败 " + error)
},
});
}
})
})
</script>
</html>
