django之choice参数，ajax
choice参数
应用场景：主要是用户性别、用户工作状态、成绩对应
##在测试文件中运行，需要写以下几个模块
if __name__ == "__main__":
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "day62.settings")
import django
django.setup()
choices = (
(1, 'male'),
(2, 'female'),
(3, 'others')
)
gender = models.IntegerField(choices=choices)
##注意：
"""
针对choices字段，如果想拿到数字所对应的的中文或者其他值 不能直接点字段
固定句式 数据对象.get_字段名_display()
"""
执行下面两种语句
from app01 import models
#1.
user_obj = models.Userinfo.objects.filter(pk=2).first()
print(user_obj.username)
print(user_obj.gender)
print(user_obj.get_gender_display())
'''
#会打印出来
nick
1
male
#这样存在值的话，就会把元组中数字对应的信息(比如这里的 male 打印出来)
'''
#2.
user_obj = models.Userinfo.objects.filter(pk=4).first()
print(user_obj.username)
print(user_obj.gender)
print(user_obj.get_gender_display())
'''
#会打印出来
michael
4
4
#这样不存在值的话，即没有对应关系，就会把数字打印出来
'''
#此外，还有以下几个常用的应用场景
#A
record_choices = (('checked', "已签到"),
('vacate', "请假"),
('late', "迟到"),
('noshow', "缺勤"),
('leave_early', "早退"),
)
record = models.CharField("上课纪录", choices=record_choices, default="checked", max_length = 32)
#B
score_choices = ((100, 'A+'),
(90, 'A'),
(85, 'B+'),
(80, 'B'),
(70, 'B-'),
(60, 'C+'),
(50, 'C'),
(40, 'C-'),
(0, ' D'),
(-1, 'N/A'),
(-100, 'COPY'),
(-1000, 'FAIL'),
)
score = models.IntegerField("本节成绩", choices=score_choices, default=-1)
Ajax
1. 异步提交和局部刷新
异步提交就是说，提交任务之后，不会原地等待，直接执行下一行代码，任务的返回通过回调机制
局部刷新，一个页面不是整体刷新，而是页面的某个地方局部刷新，比如，注册账号时，输入字母，就会判断当前账号是否被注册，但是页面却没有被刷新
2.Ajax 几个小需求（计算器，传json格式，传文件）
"""
Ajax是一门js的技术 基于原生js开发的，但是用原生的js写代码过于繁琐，需要用jq实现ajax的使用
Ajax 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
"""
## 需求一：
'''
1.展示一个前端页面 页面上有三个输入框 前两个框输入数字 点击按钮朝后端发请求页面不刷新的情况下 完成数字的加法运算
'''
#这种情况下的Content-Type: application/x-www-form-urlencoded;就是普通的POST请求内容类型
#form data（表单数据）：username=jason&password=123
#前端页面
<input type="text" id="t1"> + <input type="text" id="t2"> = <input type="text" id="t3">
<p>
<button id="b1">计算</button>
</p>
<script>
$('#b1').on('click', function(){
# 朝后端提交post数据
$.ajax({
#1.到底朝后端哪个地址发数据
url:'',#专门用来控制朝后端提交数据的地址 不写默认就是朝当前地址提交
#2.到底发送什么请求
type:'post', #专门制定ajax发送的请求方式
#3.发送的数据到底是什么
data:{'t1':$('#t1').val(), 't2':$('#t2').val()},
#4.异步提交的任务 需要通过回调函数来处理
success:function(data){ #data形参指代的就是异步提交的返回结果
#通过DOM操作，将内容渲染到标签内容上
$('#t3').val(data)
alert(data)
}
})
})
</script>
#后端页面
def index(request):
if request.method == "POST":
t1 = request.POST.get('t1')
t2 = request.POST.get('t2')
res = int(t1) + int(t2)
return HttpResponse(res)
return render(request, 'index.html')
##需求二：json格式
'''
django后端针对json格式的数据 不会自动帮你解析 会直接原封不动的给你放到request.body中
可以手动处理 获取数据
'''
#这种情况下的Content-Type: application/json，告诉后端是json格式的数据类型
#form data 表单数据：json字符串{"username":"jason","password":"123"}
#前端
<p>
<button id="b1">计算</button>
</p>
<script>
$("#bt").on('click', function(){
$.ajax({
url: '',
type: 'post',
contentType: 'application/json',
data: JSON.stringify({
'username': 'jason',
'password': '123'
})
success: function(data){
$('#t3').val(data)
}
})
})
</script>
#后端
import json
def index(request):
if request.is_ajax():
if request.method == 'POST':
json_bytes = request.body
json_str = str(json_bytes, encoding='utf8')
json_dirt = json.loads(json_str)
print(json_dirt, type(json_dirt))
return render(request, 'index.html')
##需求三：传文件
"""
注意点：需要利用内置对象 Formdata，该对象既可以传普通的键值，也可以传文件
"""
#获取Input中用户上传文件的文件内容
#前端body中的部分代码：
<input type="text" name="username" id="t1">
<input type="text" name="password" id="t2">
<input type="file" name="myfile" id="t3">
<button id="b1">提交</button>
$('b1').click(function(){
#1.先生成一个formdata对象
var myFormData = new FormData();
#2.朝对象中添加普通的键值（第一个参数是 name 字符串，就是key ,第二个参数是对应的值, 就是value）
myFormData.append('username', $("#t1").val());
myFormData.append('password', $("#t2").val());
#3.朝对象中添加文件数据
##1.先通过jquery查找到该标签（即$("#t3"),通过id找到该标签）
##2.将jquery对象转换成原生的js对象（上一步拿到的是列表套对象，然后索引0，取到js对象）
##3.利用原生js对象的方法 直接获取文件内容（上一步通过js对象，直接.files，拿到列表索引取第一个值）
myFormData.append('myfile', $('#t3')[0].files[0]);
$.ajax({
url: '',
type: 'post',
data: myFormData,#直接丢对象
#ajax传文件 一定要指定两个关键性的参数
contentType:false, # 不用任何编码，因为formdata对象自带编码， django能够识别该对象
processData:false, # 告诉浏览器不要处理我的数据 直接发就行
success:function(data){
alert(data)
}
})
})
#后端代码
def upload(request):
if request.is_ajax():
if request.method == "POST":
print(request.FILES)
return HttpResponse('已接收')
return render(request, 'upload.html')
"""
ajax传文件需要注意的事项
1.利用formdata对象 能够简单的快速传输数据（普通键值 + 文件）
2.有几个参数：
data：formdata对象
contentType: false,
processData: false,
"""
3. contentType前后端传输数据编码格式
'''
form表单 默认的提交数据的编码格式是urlencoded
urlencoded
username=admin&password=123这种就是符合urlencoded数据格式
django后端针对username=admin&password=123的urlencoded数据格式会自动解析
将结果打包给request.POST 用户只需要从request.POST即可获取对应信息
formdata
django后端针对formdata格式类型数据 也会自动解析
但是不会方法request.POST中而是给你放到了request.FILES中
ajax ajax默认的提交数据的编码格式也是urlencoded
username=jason&password=123
总结:django后端针对不同的编码格式数据 会有不同的处理机制以及不同的获取该数据的方法(所以在进行前后端交互的时候，应该将传过去的数据格式告诉前端)
'''
4.序列化组件
'''
1.将用户表的数据 查询出来 返回给前端, 给前端的是一个大字典 字典里面的数据的一个个的字段
'''
#后端
from django.core import serializers
def ser(request):
#获取对象
user_queryset = models.Userinfo.objects.all()
# [{},{},{},{}]
# user_list = []
# for user_obj in user_queryset:
# user_list.append({
# 'username':user_obj.username,
# 'password':user_obj.password,
# 'gender':user_obj.get_gender_display(),
# })
#直接对拿到的对象进行序列化
res = serializers.serialize('json',user_queryset)
print(res)
return render(request,'ser.html',locals())
#前端（只需要用模板语法把res拿到就好了）
<body>
{{ res }}
</body>
5.ajax+sweetalert的小案例
## 前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
{% load static %}
<link rel="stylesheet" href="{% static 'dist/sweetalert.css' %}">
<script src="{% static 'dist/sweetalert.min.js' %}"></script>
<style>
div.sweet-alert h2 {
padding-top: 10px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2>数据展示</h2>
<table class="table table-hover table-striped table-bordered">
<thead>
<tr>
<th>序号</th>
<th>用户名</th>
<th>密码</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for user_obj in user_queryset %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ user_obj.username }}</td>
<td>{{ user_obj.password }}</td>
<td>{{ user_obj.get_gender_display }}</td>
<td>
<a href="#" class="btn btn-primary btn-sm">编辑</a>
<a href="#" class="btn btn-danger btn-sm cancel" delete_id="{{ user_obj.pk }}">删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
<script>
$('.cancel').click(function () {
var $btn = $(this);
swal({
title: "你确定要删吗?",
text: "你要是删了,你就准备好跑路吧!",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "对,老子就要删!",
cancelButtonText: "算了,算了!",
closeOnConfirm: false,
showLoaderOnConfirm: true
},
function(){
$.ajax({
url:'',
type:'post',
data:{'delete_id':$btn.attr('delete_id')},
success:function (data) {
if (data.code==1000){
swal(data.msg, "你可以回去收拾行李跑路了.", "success");
// 1.直接刷新页面
{#window.location.reload()#}
// 2.通过DOM操作 实时删除
$btn.parent().parent().remove()
}else{
swal("发生了未知错误!", "我也不知道哪里错了.", "info");
}
}
});
});
})
</script>
</body>
</html>
##后端代码
"""
当你是用ajax做前后端 交互的时候
你可以考虑返回给前端一个大字典
"""
import time
from django.http import JsonResponse
def sweetajax(request):
if request.method == 'POST':
back_dic = {"code":1000,'msg':''}
delete_id = request.POST.get('delete_id')
models.Userinfo.objects.filter(pk=delete_id).delete()
back_dic['msg'] = '后端传来的:真的被我删了'
time.sleep(3)
return JsonResponse(back_dic)
user_queryset = models.Userinfo.objects.all()
return render(request,'sa.html',locals())