一.Ajax的详细讲解

Posted 2021-03-24 熊华

一.Ajax的详细讲解

前言

  '记得小时候发小李阳是个比较浪的孩子,有一次他拿着一张光碟上面写着禁止18岁以下的单独观看,他邀请我一起看,我是个比较听话的孩子,所以就谢绝了,他看禁止单独看就拿去和他爸妈一起看,当开播后,他妈和他爸就抓着揍他,他爸边揍边说这么好的东西为啥不早拿出来.........满了18岁,华哥要给大家从日本爬几个G的宝贝,所以深夜就开始学习IT.本节课就不讲片,只讲Ajax

一 Ajax简介

 '李阳在玩探探约爱的时候,在登录的时候发现自己的密码登录错了,可是重新登录的时候,发现名字本来是对的,可是页面刷新了,的重新登录,麻烦的很,于是他就不约了,直接去了大保健.....
 '探探公司得知到这个事情后就让华哥来改变一下,华哥就打开开发后端代码将form请求改写了Ajax,这时候就实现了异步交互,局部刷新.李阳就继续玩起了探探.......

示例

html:
        {% csrf_token %}    #就是在form表单在发起post请求时所要通过的csrf认证,  注意:'在不愿意写此代码的时候就将settings中将csrf注释点,让他不经过校验'
        用户名:<input type="text" name="username">
        头像: <input type="file" name="file_obj">
        <input type="submit" id="btn">

js代码:
#绑定一个点击事件,注意格式#
    $('#btn').click(function () {
        var formdata = new FormData();#这一步就是实例化一个对象
        var uname = $('[name="username"]').val();
        // var file_obj = $('[name="file_obj"]').val(); //"C:fakepath.jpg" 拿到的文件的本地路径
        var f_obj = $('[name="file_obj"]')[0].files[0] ; // 这是文件对象

        formdata.append('username',uname);
        formdata.append('file_obj',f_obj);
        formdata.append('csrfmiddlewaretoken',$('[name="csrfmiddlewaretoken"]').val());

################################################################
        $.ajax({
            url:'/upload/',
            type:'post',
            // data:{uname:uname,file_obj:f_obj,'csrfmiddlewaretoken':$('[name="csrfmiddlewaretoken"]').val()},

            processData:false,
            contentType:false,

            data:formdata,
            success:function (res) {
                console.log(res)
            }

        })
    })

################################################################

JsonResponse

from django.http import JsonResponse

def data(request):
    if request.method == 'GET':
        d1 = {'name':'chao','age':18}
        # d1_str = json.dumps(d1)
        # return HttpResponse(d1_str,content_type='application/json')
        return JsonResponse(d1)  干了上面两步,序列化以及加content_type响应头
        这样,ajax在处理数据时会自动将json数据反序列化,那么
        success:function(res){
            这个res就是反序列化之后的数据了,直接可以用
        }