django之choiceajax初步

Posted 2020-12-01 Micheal_L

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())