14ajax引入

【一】ajax简介

"""页面不刷新的情况下可以与后端进行数据交互
    异步提交 局部刷新
    使用ajax交互 所有的操作都不再直接影响整个页面(局部操作)
eg:注册时输入框你在写一个用户名时，他会实时告诉你是否已存在"""
    ajax不是一门全新知识 本质就是一些js代码 我们学习ajax直接使用jQuery封装之后的版本(语法更加简单)   使用ajax的前提必须要引入jQuery文件
"""基本语法"""    
   页面上有三个input框和一个提交按钮 前两个框输入数字 点击按钮 最后一个框里面展示数字的和 并且页面不能刷新
  $('#btn').click(function () {
            // 获取两个框里面的数据
            let i1Val = $('#i1').val();
            let i2Val = $('#i2').val();
            // 发送ajax请求传输数据
            $.ajax({
                url:'',  // 不写默认就是当前页面所在的地址
                type:'post', // 指定当前请求方式
                data:{'i1':i1Val,'i2':i2Val},  // 请求携带的数据
                success:function (args) {  // 异步回调函数 后端有回复自动触发
                    $('#i3').val(args)
                }
            })
        }) 
    
    
    后端request.is_ajax()获取有没有判断是不是ajax请求

【二】前后端传输数据编码格式

(1)普通版把数值传过来

1.前端
 

$.ajax(
                {
                    //url后面跟的是你这个ajax提交数据的路径，向谁提交，不写就是向当前路径提交
                    url: "",
                    //type为标定你这个ajax请求的方法
                    type: "post",
                    //data后面跟的就是你提交给后端的数据
                    data: {numberOne: numberOne, numberTwo: numberTwo},
                    //success为回调函数，参数data即后端给你返回的数据
                    success: function (data) {
                        // 注意：data 表示返回的数据。
                        console.log(data)
                        //  注意：result.val(data) 表示将返回的数据赋值给 id 为 result 的元素的 value 属性。
                        result.val(data)
                    }
                }
            )

    
   
2.后端

def add_number(request):
    if request.method == "POST":
        data = request.POST
        #  获取前端传递的参数
        # <QueryDict: {'numberOne': ['1'], 'numberTwo': ['2']}>
        number_one = data.get("numberOne")
        number_two = data.get("numberTwo")
        # 计算结果 ： 注意从前端取出来的数字是字符串类型，需要做类型转换才能运算
        result = int(number_one) + int(number_two)
        # 返回响应数据
        return HttpResponse(result)
    return render(request, "index.html")

(2)升级版利用json的dumps打包好用HttpResponse传输

1.前端
 

    $("#btn_result").click(function () {
            let numberOne = $("#numberOne").val();
            let numberTwo = $("#numberTwo").val();
            let result = $("#numberResult")
            $.ajax(
                {
                    url: "",
                    type: "post",
                    data: {numberOne: numberOne, numberTwo: numberTwo},
                    // 前端反序列化数据 方式一
                    // 在Ajax上加参数
                    // dataType 参数应该是一个字符串，表示期望从服务器返回的数据类型（如 "json", "xml", "script", "html" 等）
                    dataType: "json",//指定了格式所以可以用点来取值
                    success: function (data) {
                        console.log(data)
                        result.val(data.result)
                    }
                }
            )
        })

2.后端

def add_number(request):
    if request.method == "POST":
        data = request.POST
        number_one = data.get("numberOne")
        number_two = data.get("numberTwo")
        result = int(number_one) + int(number_two)
        result = {
            "message": "success",
            "result": result
        }
        return HttpResponse(json.dumps(result))
    return render(request, "index.html")

(3)进阶版(JsonResponse)

1.后端

def add_number(request):
    if request.method == "POST":
        data = request.POST
        #  获取前端传递的参数
        # <QueryDict: {'numberOne': ['1'], 'numberTwo': ['2']}>
        number_one = data.get("numberOne")
        number_two = data.get("numberTwo")
        # 计算结果 ： 注意从前端取出来的数字是字符串类型，需要做类型转换才能运算
        result = int(number_one) + int(number_two)
        result = {
            "message": "success",
            "result": result
        }
        # 返回响应数据 - 使用JsonResponse对象序列化成json字符串
        return JsonResponse(result)
    return render(request, "index.html")

(4)form表单

"""
请求体中携带编码格式
    Content-Type:...
django针对不同编码方式对应的数据格式会采用不同的处理策略
"""
form表单默认发送的编码格式
    Content-Type: application/x-www-form-urlencoded
  数据格式:username=jason&password=123
  django后端会自动处理到:request.POST
form表单发送文件
    Content-Type: multipart/form-data
  数据格式:隐藏不让看
  django后端会自动处理:request.POST  request.FILES
ajax默认的编码格式
    Content-Type: application/x-www-form-urlencoded
  数据格式:username=jason&password=123
  django后端会自动处理到:request.POST

【三】ajax发送json格式数据

# form表单是无法发送json格式数据的!!!
ajax发送的数据类型一定要跟数据的编码格式一致 
    不能骗人家:
    编码格式是urlencoded 
    数据格式就应该是username=jason&password=123
    但是你却发送了json格式数据
"""
django后端真多json格式的数据不会做任何的处理 就在request.body内
需要我们自行处理
"""

1.前端
 

$('#d1').click(function () {
        $.ajax({
            url:'',
            type:'post',  // 不写默认也是get请求
            contentType:'application/json',  // 不写默认是urlencoded编码
            data:JSON.stringify({'name':'jason','pwd':123}),  // 序列化方法
            success:function (args) {
            }
        })
    })

​
2.后端

def ab_json(request):
    print(request.is_ajax())  # True
    if request.method == 'POST':
        print(request.POST)  # <QueryDict: {}>
​
    print(request.body)  # 返回的是二进制数据 ：b'{"username":"dream","password":521521}'
    # 针对JSON格式的数据需要自己手动处理
    json_bytes = request.body
​
    # （1）方式一：先解码 再转换数据格式
    json_str = json_bytes.decode('utf-8')
    json_dict = json.loads(json_str)
    print(json_dict, type(json_dict))  # {'username': 'dream', 'password': 521521} <class 'dict'>
​
    # （2）方式二：json.loads(二进制数据) 内部可以自动解码再反序列化
    json_dict_loads = json.loads(json_bytes)
    print(json_dict_loads, type(json_dict_loads))  # {'username': 'dream', 'password': 521521} <class 'dict'>
​
​
    return render(request, 'ab_json.html')

【四】ajax携带文件数据

"""利用FormData()对象，把数据append进去"""

1.前端
 

// 点击按钮向后端发送普通键值对数据和文件数据
$("#btn").on('click', function () {
    // （1）先生成一个内置对象
    let formDataObj = new FormData();
​
    // （2）支持添加普通的键值对
    formDataObj.append('username', $("#d1").val());
    formDataObj.append('password', $("#d2").val());
​
    // （3）支持添加文件对象 ---> 先拿到标签对象 ----> 再拿到文件对象
    formDataObj.append('myfile', $("#d3")[0].files[0]);
​
    // （4）基于Ajax，将文件对象发送给后端
    $.ajax({
    url: '',
    type: 'post',
    // 直接将对象放到data里面即可
    data: formDataObj,
​
    // Ajax发送文件必须添加的两个参数
    // 不需要使用任何编码 -  Django后端能自动识别 formdata 对象
    contentType: false,
    // 告诉浏览器不要对我的数据进行任何处理
    processData: false,
//浏览器不要对数据进行处理
    success: function (args) {
​
    }
})
    

    2.后端
 

  print('POST::>>', request.POST)
# 普通键值对放在了  request.POST   中
# POST::>> <QueryDict: {'username': ['dream'], 'password': ['666']}>
​
print('FILES::>>', request.FILES)
# 文件数据放在了  request.FILES   中
# FILES::>> <MultiValueDict: {'myfile': [<InMemoryUploadedFile: img.png (image/png)>]}>

【五】sweetalert和layui

​

【六】Django框架之序列化组件serializers

"""
以后我们用的序列化组件是DRF 这里学自带的是提前瞜一眼效果
"""
"""对模型表中的数据进行序列化"""
from app01 import models
from django.http import JsonResponse
from django.core import serializers
def d_data(request):
    # 前后端分离之后 django orm产生的queryset无法直接被前端识别 还是需要json格式数据(硬通货)
    # 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_queryset = models.User.objects.all()
    ret = serializers.serialize('json', user_queryset)
    return HttpResponse(ret)

【七】批量数据操作

def many_data(request):
    # 循环插入10万条数据(频繁走数据库操作 效率极低 不推荐!!!)
    # for i in range(100000):
    #     models.Book.objects.create(title=f'第{i}本书')
    '''批量插入'''
    book_list = []
    for i in range(100000):
        # 先用类产生一个对象
        source_book_obj = models.Books(title=f'第{i}本书')
        # 将对象追加到列表中
        book_list.append(source_book_obj)
    models.Books.objects.bulk_create(book_list)  # 批量插入
    book_queryset = models.Books.objects.all()
    return render(request,'many_data.html',locals())