django学习笔记

今日内容概要

• Ajax异步提交
• 序列化

今日内容详细

Ajax异步提交

Ajax：页面不刷新的情况下可以与后端进行数据交互。特点：异步提交，局部刷新。

Ajax不是一门全新知识，本质就是一些js代码，我们学习Ajax直接使用jQuery封装之后的版本(语法更加简单)，使用Ajax的前提必须要引入jQuery文件。

学习Ajax一定要能够发现与form表单提交数据的区别。

Ajax：提交数据页面不用刷新，原始数据还在，处理数据的过程中不影响页面其他操作

form：表单提交数据页面刷新，原始数据不在，并且处理数据的过程中无法做其他操作

基础语法

$.ajax({
    url:'',    # 控制数据的提交地址
    type:'',  # 控制请求方式(默认get请求)
    data:{},   # 组织提交的数据
    success:function(形参){
        # 异步回调函数
    }
})

例子：页面上有三个input框和一个提交按钮，前两个框输入数字，点击按钮 ，最后一个框里面展示数字的和 并且页面不能刷新。

# html
<input type="text" id="d1">+<input type="text" id="d2">=<input type="text" id="d3">#}
<input type="button" value="计算" id="subBtn">
<script>
    $('#btn').click(function () {
        # 朝后端发送数据 使用ajax
        $.ajax({
            url:'',  # 不写默认就是当前页面所在的地址
            type:'post', # 指定当前请求方式
            data:{'i1':$('#d1').val(),'i2':$('#d2').val()},  # 请求携带的数据
            success:function (args) {  # 异步回调函数 后端有回复自动触发
                $('#d3').val(args)
            }
        })
    })
</script>
# views
def index(request):
    if request.is_ajax():   # 可以判断是否是ajax请求
        if request.method == 'POST':  # ajax携带的数据传给了request.POST
            i1 = request.POST.get('i1')
            i2 = request.POST.get('i2')
            res = int(i1) + int(i2)
            return HttpResponse(res)  # HttpResponse返回的数据被异步回调函数的参数接收
    return render(request, 'abAjax.html')

数据编码格式

请求体中携带编码格式：Content-Type: ...

django针对不同编码方式对应的数据格式会采用不同的处理策略

from表单默认发送的编码格式

Content-Type: application/x-www-form-urlencoded
数据格式: name=jason&password=123&hobby=read
django后端统一处理到request.POST中

from表单发送文件

Content-Type: multipart/form-data
数据格式: 无法查阅、隐藏不让看
 django后端自动将文件数据处理到request.FILES、普通数据request.POST

ajax默认发送的编码格式

Content-Type: application/x-www-form-urlencoded
数据格式: name=jason&password=123&hobby=read
django后端统一处理到request.POST中

ajax发送json格式数据

编码格式：urlencoded
数据格式：json格式
django后端不会做任何处理、在request.body中存储(bytes类型)、需要我们自己处理

实例：

<button id="d1">点我</button>
<script>
# 绑定点击事件
    $('#d1').click(function () {
        $.ajax({
            url:'', # 不写默认就是当前页面所在的地址
            type:'post',  # 不写默认也是get请求
            contentType: 'application/json',  # 不写默认是urlencoded编码
            data:JSON.stringify({'name':'jason','pwd':123}),  # 序列化方法将数据转为json格式
            success:function (args) { 
                # 异步回调函数 后端有回复自动触发
                                }
        })
    })
</script>

注意事项：
contentType: 'application/json',  # 不写默认是urlencoded编码
data:JSON.stringify({'name':'jason','pwd':123}),  # 序列化方法将数据转为json格式

ajax携带文件数据

<input type="text" id="d1">
<input type="file" id="d2">
<button id="d3">点我</button>
<script>
$('#d3').click(function () {
    # 1.产生内置对象帮助你携带文件数据(支持添加各种数据)
    let formData = new FormData();
    # 2.添加普通数据
    formData.append('username',$('#d1').val())
    # 3.添加文件数据
    formData.append('file', $('#d2')[0].files[0]) # jq对象取索引0变成标签对象点files拿携带的文件取索引0拿单个文件
    # 4.发送ajax请求
    $.ajax({
        url:'',
        type:'post',
        data:formData,
        # 携带文件必须要指定的两个参数
        contentType:false,  # 不使用任何编码
        processData:false,  # 不处理数据对象
        success:function (args) {
                # 处理异步回调返回的结果
        }
    })
})
</script>

回调函数

后端跟ajax交互不应该再返回页面，通常情况下都是返回json格式数据

使用ajax交互 所有的操作都不再直接影响整个页面(局部操作)

// 如果需要实现重定向:
success:function (args) { // 异步回调函数
    window.location.href=args // 处理异步回调返回的结果(js的BOM操作)
    console.log(JSON.parse(args)) //将前端的数据反序列化为js里面的自定义对象
            }
'''返回的数据都在args这个形参中'''

前端针对HttpResponse和JsonResponse返回的json格式数据处理策略不同

前者不会自动反序列化、而后者会自动反序列化
    如果想让前者也自动反序列化可以添加一个固定的参数
        dataType:'JSON'

序列化

serializers序列化组件可以把我们用ORM操作产生的QuerySet对象直接转成json格式数据，比我们之前JsonResponse方便。

from app01 import models
from django.http import JsonResponse

# 原理
def data(request):
    data_list = []  # [{}, {}, {}]
    user_queryset = models.User.objects.all()
    for user_obj in user_queryset:
        data_list.append({
            'pk': user_obj.pk,
            'name': user_obj.name,
            'age': user_obj.age,
            'gender': user_obj.gender,
            'gender_real': user_obj.get_gender_display(),
            'addr': user_obj.addr
        })
    return JsonResponse(data_list, safe=False)

# 模块
    #拿到用户表里面的所有的用户对象
    user_list = models.User.objects.all()
    #导入内置序列化模块
    from django.core import serializers
    #调用该模块下的方法，第一个参数是你想以什么样的方式序列化你的数据
    ret = serializers.serialize('json', user_list)
    return HttpResponse(ret)

sweetalert前端插件

可以使用sweetat插件使前端页面更加美观。https://github.com/lipis/bootstrap-sweetalert