Python3项目初始化10-->前端基础jquery、ajax，sweetalert--创建用户删除用户改造

32、JS基础-dmodal
点击“创建”，不调整新页面操作，直接弹出框操作。
modals弹框指示页面：https://v3.bootcss.com/javascript/#modals
拷贝代码，父节点在body里面。
<a class="btn btn-primary btn-create-user" href="javascript:void(0);">创建</a><br/><br/> <!--禁用href跳转功能-->
...
</div> <!-- /container -->
<!-- Modal -->
<div class="modal fade" id="dialog-user-create" 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">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
...
jQuery('.btn-create-user').on('click', function () {
jQuery('#dialog-user-create').modal({
show: true,
backdrop: 'static'
});
});
</script>
页面点击“创建”，可以正常弹窗。如图展示结果。

32、JS基础-ajax_post
点击“创建”，设置创建页面.
页面展示index.html，
...
<table id="table_user" class="table table-stripe table-bordered table-hover table-condensed">
...
<div class="modal fade" id="dialog-user-create" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
...
<div class="modal-body">
<form class="form-horizontal form-create-user">
<div class="form-group">
<label class="control-label col-md-3">用户名：</label>
<div class="col-md-9">
<input type="text" class="form-control" name="name" value="" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">密码：</label>
<div class="col-md-9">
<input type="password" class="form-control" name="password" value="" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">再次输入密码：</label>
<div class="col-md-9">
<input type="password" class="form-control" name="other_password" value="" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">联系方式：</label>
<div class="col-md-9">
<input type="text" class="form-control" name="tel" value="" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">年龄：</label>
<div class="col-md-9">
<input type="text" class="form-control" name="age" value="" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">性别：</label>
<div class="col-md-9">
<label class="radio-inline"><input type="radio" name="sex" value="1" checked="checked"/>男</label>
<label class="radio-inline"><input type="radio" name="sex" value="0" />女</label>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary btn-save-user">保存</button>
</div>
</div>
</div>
...
<script>
jQuery(document).ready(function () {
jQuery('#table_user').DataTable();
});
jQuery('.btn-create-user').on('click', function () {
jQuery('#dialog-user-create').modal({
show: true,
backdrop: 'static'
});
});
jQuery('.btn-save-user').on('click', function () {
console.log('提交表单');
console.log(jQuery('.form-create-user').find('[name=name]').val());
console.log(jQuery('.form-create-user').serializeArray());

})
</script>
...
自此，页面展示正常。如截图。

ajax
a = async
ja = javascript
x = xml =>json
JQuery.post(url, data, function(result) {console.log(result)}, 'json')
JQuery.get(url, data, function(result) {console.log(result)}, 'json')

视图函数view.html：
from django.http import JsonResponse
'''
{
code:200(创建成功), 400(数据验证失败), 403(用户未登录)
result:{}
text: ''
errors:
}
'''
def create_ajax(request):
if not request.session.get('user'):
return JsonResponse({'code': 403})
is_valid, user, errors = UserValidator.valid_create(request.POST) # UserValidator.valid_create
if is_valid:
user.save()
return JsonResponse({'code': 200})
else:
return JsonResponse({'code': 400, 'errors': errors})
路由函数urls.py：
path('create/ajax', views.create_ajax, name='create_ajax'),
改造前端：
<form class="form-horizontal form-create-user">
{% csrf_token %}
...
jQuery('.btn-save-user').on('click', function () {
var data = jQuery('.form-create-user').serializeArray();
jQuery.post("{% url 'user:create_ajax' %}", data, function (result) {
console.log(result);
}, 'json')
});
</script>
访问验证，可以正常创建用户。
虽然可以创建用户成功，但是报错不明显。并且“保存”按钮可以一直保存多次。报错截图如下。

分类：
创建成功后，刷新页面
创建失败后有提示
未登录，直接直接提示
jQuery('.btn-save-user').on('click', function () {
var data = jQuery('.form-create-user').serializeArray();
jQuery.post("{% url 'user:create_ajax' %}", data, function (result) {
console.log(result);
if(result['code'] == 200){
alert('成功');
//关闭dialog
jQuery('.btn-create-user').modal('hide');
/*刷新table*/
window.location.reload()
} else if (result['code'] == 400){
//alert('验证失败...');
var errors = ['验证失败...']
jQuery.each(result['errors'], function (k,v) {
errors.push(v)
});
alert(errors.join('\n'))
}else if (result['code'] == 403){alert('未登录');}
}, 'json')
});
以上全部实现，如下截图。

遗留问题，每次alert弹出页面什么也做不了，需要借助其他工具sweetalert了。
以下操作，这样就比较平滑了。
jQuery('.btn-save-user').on('click', function () {
var data = jQuery('.form-create-user').serializeArray();
jQuery.post("{% url 'user:create_ajax' %}", data, function (result) {
console.log(result);
if(result['code'] == 200){
swal('成功', '', 'success')
//关闭dialog
jQuery('.btn-create-user').modal('hide');
/*刷新table*/
window.location.reload()
} else if (result['code'] == 400){
//alert('验证失败...');
var errors = []
jQuery.each(result['errors'], function (k,v) {
errors.push(v)
});
//alert(errors.join('\n'))
swal('验证失败', errors.join('\n'), 'error')
}else if (result['code'] == 403){
swal({
title: '未登录',
text: "未登录",
timer: 2000,
showConfirmButton: false
})
}
}, 'json')
});
</script>
验证ok，平滑弹出。

平滑删除。
sweetalert练习，
视图
def delete_ajax(request):
if not request.session.get('user'):
return JsonResponse({'code': 403})
uid = request.GET.get('id', '')
User.delete_by_id(uid)
return JsonResponse({'code': 200})
路由
path('delete/ajax', views.delete_ajax, name='delete_ajax'),
index页面处理
{% if request.session.user.id != user.id %}
<a class="btn btn-danger btn-xs btn-delete-user" data-id="{{ user.id }}" href="javascript:void(0)"}?uid={{ user.id }}">删除</a>
{% endif %}
jQuery('.btn-delete-user').on('click', function () {
var id=jQuery(this).attr('data-id');
swal({
title: "确定删除吗？",
text: '',
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "确定删除!",
cancelButtonText: "取消删除！",
closeOnConfirm: false,
closeOnCancel: true
},
function () {
//提交ajax删除数据
jQuery.get("{% url 'user:delete_ajax' %}", {'id':id},function (result) {
console.log(result);
if(result['code'] == 200){
swal({
title: "成功",
text:'',
type: "success"
}, function () {
//关闭sweetalert
swal.close();
/*刷新table*/
window.location.reload()
})
}else if(result['code'] == 400){
var errors = []
jQuery.each(result['errors'], function (k,v) {
errors.push(v);
});
swal('验证失败', errors.join('\n'), 'error')
}else if (result['code'] == 403){
swal({
title: "",
text: '',
timer: 2000,
showConfirmButton: false
});
}
})
})
})
</script>
验证可以正常，平滑删除。

引入sweetalert：https://sweetalert.bootcss.com/docs/