Ajax

1简介

"""
异步提交
局部刷新
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
"""

例子:github注册
	动态获取用户名,实时传给后端确认并将结果返回给前端
    
前端像后端发送请求的方式:
1.浏览器地址栏
2.a标签
3.form表单
4.ajax


我们只学习jQuery封装之后的ajax,不学习原装的。
不只有jQuery能实现ajax,其它框架也可以。但原理是相同的,只是语法区别。

2基本语法

以实现计算为例


"""""""""""""""""""""""""""前端:"""""""""""""""""""""""""""
    $('#btn').click(function () {
        d1 = $('#d1').val()
        d2 = $('#d2').val()
        $.ajax({
            // 1. 路由
            url:'',
            // 2. 设置提交方式,小写,默认是'get'
            type:'post',
            // 3. 向后端提交数据
            data:{'d1':d1,'d2':d2},
            // 4. 前端自动将后端HttpResponse返回的数据进行反序列化,可以不写
            dataType: 'JSON',
            // 5. 指定编码格式为json,默认是urlencoded
            // contentType:'application/json',    // data 数据也要改为json格式
            // 6.  异步回调函数
            success:function (args) {
                // args为后端返回的数据(后端无论返回什么,都会给args,包括直接返回网页)
                // 后端JsonResponse返回给前端的数据会自动进行反序列化
                $('#d3').val(args.d3)
            }
		})
    })
# 上面1,2,3,6是通常必写的,其它的视情况添加
    
    
""""""""""""""""""""""""""后端:""""""""""""""""""""""""""
def home(request):
    if request.is_ajax():
        d1 = request.POST.get('d1')
        d2 = request.POST.get('d2')
        d3 = int(d1) + int(d2)
        data ={'d3':d3,}
        # JsonResponse返回给前端的数据会自动进行反序列化
        # 手动Json,再HttpResponse的数据要手动在前端进行反序列化
        return  JsonResponse(data)
    return render(request,'home.html')

3前端传输数据的编码格式

"""
get请求是独立的,不研究;下面说的都是post请求。
"""

# 1.前端传输数据的3种方式
urlencoded
formdata
json

# 2.form表单
默认是urlencoded
格式:?d1=1$d2=2
django后端会自动将符合urlencoded格式的数据解析封装到request.POST中

如果将编码格式改为formdata(form表单上传文件时用),普通键值对还是解析封装到request.POST中;文件解析到request.FILES中

form表单不支持json格式


# 3.ajax
默认是urlencoded
格式:?d1=1$d2=2
django后端会自动将符合urlencoded格式的数据解析封装到request.POST中


4ajax发送json格式数据

"""前端设置"""
指定编码格式为json,默认是urlencoded
contentType:'application/json',  # 修改编码格式时数据格式也要对应的修改,保持一致

    
"""后端解析"""
django针对json格式的数据不会做任何处理,要自己手动处理。
json格式的数据会以2进制的形式存放在request.body中,所以:
1.解码
2.反序列化
# json.loads()内部会自动识别2进制,将其解码,故以上2步可以省略为反序列化这一步。

5ajax发送文件数据

"""前端设置"""
$('#btn').click(function () {
        // 1.实例化,获得formdata对象,用于存放数据
        var fordata_obj=new FormData();
        // 2.添加普通数据
        // fordata_obj.append('键','值')
        // 3.添加文件
        fordata_obj.append('file',$('#d4')[0].files[0])  //后面是文件对象

        $.ajax({
            url:'',
            type:'post',

            // 区别之处
            data:fordata_obj,    // 直接放formdata对象
            contentType:false,   // 不使用任何编码,django后端能自动识别formdata对象
            processData:false,   // 告诉浏览器不对数据做任何处理

            success:function (args) {
                pass
            }
         })
    })
# 前端要借助formdata对象存放数据,分为3步



"""后端接收"""
django后端能自动识别都formdata对象,并将普通键值对解析封装到request.POST中;文件解析到request.FILES中。

6django自带的序列化组件(drf的铺垫)

"""
在前后端分离的开发中,通过组件,我们将获取到的queryset对象转化成特定的格式(列表套字典),再将其发送给前端。配上一份数据说明表就行了。
"""


from django.core import serializers 		# 导模块

user_queryset = models.User.objects.all()	# 获取数据
res = serializers.serialize('json',user_queryset)	# 返回特定格式的数据,直接发送给前端

7ajax结合sweetalert实现删除的二次确认

sweetalert是一个类似于bootstrap的东西,也有2个文件,用于产生不同样式的弹窗。
posted @ 2021-08-23 11:43  hai437  阅读(31)  评论(0编辑  收藏  举报