模态对话框进行提交做验证时，不适合用form表单提交，要用ajax方式进行提交。因为做验证时不应该是报错信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.css"/>
</head>
<body>
<div class="container">
<div>
<a class="btn btn-primary" id="addBtn">添加</a>
<a class="btn btn-danger">删除</a>
</div>
<div>
<table class="table table-bordered table-striped">
<thead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>班级</td>
<td>操作</td>
</tr>
</thead>
<tbody>
{% for row in stu_list %}
<tr>
<td>{{ row.id }}</td>
<td>{{ row.username }}</td>
<td>{{ row.age }}</td>
<td>{{ row.gender }}</td>
<td>{{ row.cs_id }}</td>
<td><a class="glyphicon glyphicon-remove del-row icon"></a><a class="fa fa-pencil-square-o icon"></a></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div></div>
</div>
<!-- Button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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" id="myModalLabel">创建学生</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="test" class="form-control" name="username" placeholder="姓名">
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">年龄</label>
<div class="col-sm-10">
<input type="test" class="form-control" name="age" placeholder="年龄">
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">性别</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="gender" value="1"> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" value="0"> 女
</label>
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">班级</label>
<div class="col-sm-10">
<select class="form-control" name="cls_id">
{% for row in cls_list %}
<option value="{{ row.id }}">{{ row.title }}</option>
{% endfor %}
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<span id="errorMsg" style="color: red"></span>
<button type="button" class="btn btn-default" id="btnSave">保存</button>
<button type="button" class="btn btn-primary">取消</button>
</div>
</div>
</div>
</div>
<script src="/static/js/jquery-3.1.1.js"></script>
{#jquery要加在bootstrap前#}
<script src="/static/plugins/bootstrap/js/bootstrap.js"></script>
<script>
$(function () {
bindEvent();
bindSave();
})
function bindEvent() {
$('#addBtn').click(function () {
$('#addModal').modal('show');
})
}
function bindSave() {
$('#btnSave').click(function () {
var postData={};
$('#addModal').find('input,select').each(function () {
var v=$(this).val();
var n=$(this).attr('name');
if (n=='gender'){
if(this.checked){
postData[n]=v;
}
}else{
postData[n]=v;
}
});
console.log(postData)
$.ajax({
url:'/add_student/',
type:'POST',
data:postData,
success:function (arg) {
var dict=JSON.parse(arg);
if (dict.status){
window.location.reload();
}else {
$('#errorMsg').text(dict.message);
}
}
})
});
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.css"/>
</head>
<body>
<div class="container">
<div>
<a class="btn btn-primary" id="addBtn">添加</a>
<a class="btn btn-danger">删除</a>
</div>
<div>
<table class="table table-bordered table-striped">
<thead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>班级</td>
<td>操作</td>
</tr>
</thead>
<tbody>
{% for row in stu_list %}
<tr>
<td>{{ row.id }}</td>
<td>{{ row.username }}</td>
<td>{{ row.age }}</td>
<td>{{ row.gender }}</td>
<td>{{ row.cs_id }}</td>
<td><a class="glyphicon glyphicon-remove del-row icon"></a><a class="fa fa-pencil-square-o icon"></a></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div></div>
</div>
<!-- Button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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" id="myModalLabel">创建学生</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="test" class="form-control" name="username" placeholder="姓名">
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">年龄</label>
<div class="col-sm-10">
<input type="test" class="form-control" name="age" placeholder="年龄">
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">性别</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="gender" value="1"> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" value="0"> 女
</label>
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">班级</label>
<div class="col-sm-10">
<select class="form-control" name="cls_id">
{% for row in cls_list %}
<option value="{{ row.id }}">{{ row.title }}</option>
{% endfor %}
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<span id="errorMsg" style="color: red"></span>
<button type="button" class="btn btn-default" id="btnSave">保存</button>
<button type="button" class="btn btn-primary">取消</button>
</div>
</div>
</div>
</div>
<script src="/static/js/jquery-3.1.1.js"></script>
{#jquery要加在bootstrap前#}
<script src="/static/plugins/bootstrap/js/bootstrap.js"></script>
<script>
$(function () {
bindEvent();
bindSave();
})
function bindEvent() {
$('#addBtn').click(function () {
$('#addModal').modal('show');
})
}
function bindSave() {
$('#btnSave').click(function () {
var postData={};
$('#addModal').find('input,select').each(function () {
var v=$(this).val();
var n=$(this).attr('name');
if (n=='gender'){
if(this.checked){
postData[n]=v;
}
}else{
postData[n]=v;
}
});
console.log(postData)
$.ajax({
url:'/add_student/',
type:'POST',
data:postData,
success:function (arg) {
var dict=JSON.parse(arg);
if (dict.status){
window.location.reload();
}else {
$('#errorMsg').text(dict.message);
}
}
})
});
}
</script>
</body>
</html>
5586
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
