一.Ajax的詳細講解

一.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\0.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就是反序列化以後的數據了,直接能夠用
        }