67、ajax的使用

2022-10-13 19:30:46

一、前后端传输数据的编码格式

1.1、get请求的编码格式

　　get请求就一种编码格式，请求数据直接放在URL+？后面　　

url?username=jason&password=123

1.2、post请求的编码格式

　　向后端发送post请求的方式分为：form表单以及ajax请求

1.3、前后端传输数据的编码格式

　　urlencoded：将键值对的参数用&连接起来，如果有空格，将空格转换为+加号；有特殊符号，将特殊符号转换为ASCII HEX值

　　formdata：不会对参数编码

　　json：会对参数进行编码

1.4、研究form表单

　　form表单不能使用json格式，form表单默认为urlencoded格式，数据格式为：username=jason&password=123

　　Django使用编码格式使用urlencoded时，会自动将解析封装到request.post中　　　

username=jason&password=123    >>> request.POST

　　Django使用编码格式改成formdata时，针对普通键值解析封装在request.post中，而文件的解析会封装在request.files中

1.5、研究ajax

　　ajax可以使用三种格式，默认为urlencoded格式，数据格式为：username=jason&age=20

　　Django后端针对符合urlencoded时，会将数据封装到request.post中

username=jason&age=20    >>> request.POST

二、ajax发送json格式数据

2.1、实际编码格式与设置编码格式　　

　　前后端传输数据时需要保证编码格式和真正的编码格式一致，否则找不到

　　例如json格式的数据{"username":"jason","age":25}  在urlencoded格式保存位置request.post中是找不到的

2.2、request对象方法的补充

　　request.is_ajax（）：判断是否为ajax请求，返回布尔值

2.3、ajax设定json格式

　　URL：可填可不填，　　type：设置请求方式　　data：输入数据，要求和指定格式一致　　contentType：设置编码格式　　success：function（）

　　注意：1.contentType需要指定成application/json

　　　　　2.数据是真的json格式

　　　　　3.Django后端不会处理json格式的数据，需要去request.body获取

<script>
    $(‘#d1‘).click(function () {
        $.ajax({
            url:‘‘,
            type:‘post‘,
            data:JSON.stringify({‘username‘:‘jason‘,‘age‘:25}),
            contentType:‘application/json‘,  // 指定编码格式
            success:function () {

            }
        })
    })
</script>

        json_bytes = request.body
        json_str = json_bytes.decode(‘utf-8‘)
        json_dict = json.loads(json_str)

        # json.loads括号内如果传入了一个二进制格式的数据那么内部自动解码再反序列化
        json_dict = json.loads(json_bytes)

三、ajax发送文件　　formdata

　　1.ajax发送文件需要借助js内置对象formdata，添加键值对，添加文件对象，

　　2.接着指定两个关键性参数：contentType：false，不需要任何编码，自动识别formdata对象，processData：false，使浏览器不对数据做任何的处理

　　3.Django后端能够自动识别formdata对象，并且将键值对封装到request.post，文件封装到request.files中

<script>
    // 点击按钮朝后端发送普通键值对和文件数据
    $(‘#d4‘).on(‘click‘,function () {
        // 1 需要先利用FormData内置对象
        let formDateObj = new FormData();
        // 2 添加普通的键值对
        formDateObj.append(‘username‘,$(‘#d1‘).val());
        formDateObj.append(‘password‘,$(‘#d2‘).val());
        // 3 添加文件对象
        formDateObj.append(‘myfile‘,$(‘#d3‘)[0].files[0])
        // 4 将对象基于ajax发送给后端
        $.ajax({
            url:‘‘,
            type:‘post‘,
            data:formDateObj,  // 直接将对象放在data后面即可

            // ajax发送文件必须要指定的两个参数
            contentType:false,  // 不需使用任何编码 django后端能够自动识别formdata对象
            processData:false,  // 告诉你的浏览器不要对你的数据进行任何处理

            success:function (args) {
            }
        })


    })
</script>

def ab_file(request):
    if request.is_ajax():
        if request.method == ‘POST‘:
            print(request.POST)
            print(request.FILES)
    return render(request,‘ab_file.html‘)

四、ajax结合sweetalert

　　通过拷贝代码，在别人的基础上进行修改

　　添加二次确认的弹窗，根据各个参数的意思，进行修改

<script>
    $(‘.del‘).on(‘click‘,function () {
        // 先将当前标签对象存储起来
        let currentBtn = $(this);
        // 二次确认弹框
        swal({　　　　　　　　　　　　#使用拷贝，修改信息
          title: "你确定要删吗?",
          text: "你可要考虑清除哦，可能需要拎包跑路哦!",
          type: "warning",
          showCancelButton: true,
          confirmButtonClass: "btn-danger",
          confirmButtonText: "是的，老子就要删!",
          cancelButtonText: "算了,算了!",
          closeOnConfirm: false,
          closeOnCancel: false,
          showLoaderOnConfirm: true
        },
        function(isConfirm) {
          if (isConfirm) {
                // 朝后端发送ajax请求删除数据之后 再弹下面的提示框
                $.ajax({
                    {#url:‘/delete/user/‘ + currentBtn.attr(‘delete_id‘),  // 1 传递主键值方式1#}
                    url:‘/delete/user/‘,  // 2 放在请求体里面
                    type:‘post‘,
                    data:{‘delete_id‘:currentBtn.attr(‘delete_id‘)},
                    success:function (args) {  // args = {‘code‘:‘‘,‘msg‘:‘‘}
                        // 判断响应状态码 然后做不同的处理
                        if(args.code === 1000){
                            swal("删了!", args.msg, "success");
                            // 1.lowb版本 直接刷新当前页面
                            {#window.location.reload()#}
                            // 2.利用DOM操作 动态刷新
                            currentBtn.parent().parent().remove()
                        }else{
                            swal(‘完了‘,‘出现了位置的错误‘,‘info‘)
                        }
                    }

                })

          } else {
            swal("怂逼", "不要说我认识你", "error");
          }
        });
    })

</script>

五、Django自带的序列化组件

"""
如果发现你可以直接使用MySQL但是无法使用sqlite3
不要慌张不要恐惧 你只需要按照之前MySQL的操作将sqlite3的驱动装一下即可
"""
# 需求:在前端给我获取到后端用户表里面所有的数据 并且要是列表套字典
import json
from django.http import JsonResponse
from django.core import serializers
def ab_ser(request):
    user_queryset = models.User.objects.all()
    # [{},{},{},{},{}]
    # user_list = []
    # for user_obj in user_queryset:
    #     tmp = {
    #         ‘pk‘:user_obj.pk,
    #         ‘username‘:user_obj.username,
    #         ‘age‘:user_obj.age,
    #         ‘gender‘:user_obj.get_gender_display()
    #     }
    #     user_list.append(tmp)
    # return JsonResponse(user_list,safe=False)
    # return render(request,‘ab_ser.html‘,locals())

    # 序列化
    res = serializers.serialize(‘json‘,user_queryset)
    """会自动帮你将数据变成json格式的字符串 并且内部非常的全面"""
    return HttpResponse(res)
"""
[
 {"pk": 1, "username": "jason", "age": 25, "gender": "male"}, 
 {"pk": 2, "username": "egon", "age": 31, "gender": "female"},
 {"pk": 3, "username": "kevin", "age": 32, "gender": "others"}, 
 {"pk": 4, "username": "tank", "age": 40, "gender": 4}
 ]
前后端分离的项目
    作为后端开发的你只需要写代码将数据处理好
    能够序列化返回给前端即可 
        再写一个接口文档 告诉前端每个字段代表的意思即可
        
        
[
{   "model": "app01.user", 
    "pk": 1, 
    "fields": {"username": "jason", "age": 25, "gender": 1}}, 
    
{   "model": "app01.user", 
    "pk": 2, 
    "fields": {"username": "egon", "age": 31, "gender": 2}}, 
    
{   "model": "app01.user", 
    "pk": 3, 
    "fields": {"username": "kevin", "age": 32, "gender": 3}},
     
{   "model": "app01.user", 
    "pk": 4, 
    "fields": {"username": "tank", "age": 40, "gender": 4}}
]
写接口就是利用序列化组件渲染数据然后写一个接口文档 该交代交代一下就完事

六、批量插入

6.1、单独插入

　　单独插入数据，使用for循环，里面使用create添加信息，每添加一行数据，插入一行

def ab_pl(request):
    # 先给Book插入一万条数据
     for i in range(10000):
         models.Book.objects.create(title=‘第%s本书‘%i)
    # # 再将所有的数据查询并展示到前端页面
    book_queryset = models.Book.objects.all()

6.2、批量插入

　　建立一个空列表，使用for循环，建立模板信息，进行添加，最后使用批量插入数据bulk_create，可以大量的节省时间

# book_list = []
    # for i in range(100000):
    #     book_obj = models.Book(title=‘第%s本书‘%i)
    #     book_list.append(book_obj)
    # models.Book.objects.bulk_create(book_list)
    """
    当你想要批量插入数据的时候 使用orm给你提供的bulk_create能够大大的减少操作时间
    :param request: 
    :return: 
    """
    return render(request,‘ab_pl.html‘,locals())

七、分页器

　　计算出一本书需要多少页，Django中有自带的分页器模块，但书写麻烦，功能简单，

　　　　所以通常使用自定义的分页器，但是已经封装好了，只需要了解内部逻辑即可

# 分页
    book_list = models.Book.objects.all()

    # 想访问哪一页
    current_page = request.GET.get(‘page‘,1)  # 如果获取不到当前页码 就展示第一页
    # 数据类型转换
    try:
        current_page = int(current_page)
    except Exception:
        current_page = 1
    # 每页展示多少条
    per_page_num = 10
    # 起始位置
    start_page = (current_page - 1) * per_page_num
    # 终止位置
    end_page = current_page * per_page_num

    # 计算出到底需要多少页
    all_count = book_list.count()

    page_count, more = divmod(all_count, per_page_num)
    if more:
        page_count += 1

    page_html = ‘‘
    xxx = current_page
    if current_page < 6:
        current_page = 6
    for i in range(current_page-5,current_page+6):
        if xxx == i:
            page_html += ‘<li class="active"><a href="?page=%s">%s</a></li>‘%(i,i)
        else:
            page_html += ‘<li><a href="?page=%s">%s</a></li>‘%(i,i)



    book_queryset =  book_list[start_page:end_page]

 

　　

67、ajax的使用

上一篇：前端基础之css


下一篇：android material design主题在线配色