ajax 上傳文件，post上傳文件，ajax 提交 JSON 格式的數據

ajax簡介

前后台做數據交互

前后端做數據交互的方式（三種）：    
（1）瀏覽器窗口輸入地址（get的方式）
（2）form表單提交數據
（3）ajax提交數據

特點

特點：
　　（1）異步
　　　　　　異步與同步的區別：同步是請求發過去，要等着回應；異步不需要等待，可以進行其他操作
　　（2）局部刷新

使用

使用：
        （1）url:匹配的路由
        （2）type:發送的的方式
        （3）data:發送的數據
        （4）success:發送的數據成功回調條數

         $('.btn').click(function () {
             $.ajax({
                url:'/index/',
                type:'post',
                data:{"name":'lqz',"age":18},
                success:function (data) {
                    alert(data)
                }
            })
         });

        前端知識點：
            $('#id') : JQ獲取標簽
            $('#id').val() : 獲取值
            js跳轉頁面：location.href = 'https://www.baidu.com/'

post 上傳文件

# 知識要點：
# enctype="multipart/form-data"   # 傳文件格式
# enctype="application/x-www-form-urlencoded"   # 默認格式

# 模板層：
<form action="/myfiles/" method="post" enctype="multipart/form-data">
　　<input type="file" name="myfile">
　　<input type="submit" value="提交">
</form>

# 視圖層：
def myfiles(request):
　　if request.method == 'GET':
　　　　return render(request, 'myfiles.html')
　　files = request.FILES     # 拿到字典 {'myfile': [<InMemoryUploadedFile: 111.png (image/png)>]}>
    my_file = files.get('myfile') # 取出文件流
    with open(my_file.name,'wb') as f:  # 寫入文件
    　　for i in my_file:
    　　　　f.write(i)
    return HttpResponse('OK')

ajax 上傳文件

# 知識要點：
# 傳文件用 FormData 類
# 往對象里（字典）添加值

$('.btn').onclick(function () {
    var fordata = new FormData(); # 生成文件對象
    fordata.append('name',$('#name').val()); # 添加值
    fordata.append('myfiles',$('#myfiles')[0].files[0]); # 添加文件流
    
    $.ajax({
        url:'/ajaxfiles/',  # 路由
        type:'post',  # 請求的形式

        processData:false,  # 不指定編碼方式（默認指定編碼 urlencode）
        contentType:false,  # 不處理數據(默認處理數據：name=lxx &age=18)

        data:fordata,  # 傳文件的數據
        success:function (data) {  # 請求成功回調函數
            alert(data)
        }
    })
})

ajax 提交 Json 格式的數據

# 知識要點：
# Json.stringify : 相當於序列化成字符串的形式
# Json.parse : 相當與反序列化

# $('.div').text('xx')：修改標簽內容

# 發送Json格式的請求方式
# contentType:'application/json'

# 響應回來解析的方式(不管后台傳過來的數據，都給我反序列化)
# dataType:'json',

# 返回用JsonResponse,Django自動反序列化


# 模板層：
$('.btn').click(function () {
    var post_data={'name':$("#name").val(),'pwd':$("#pwd").val()};
    var post=JSON.stringify(post_data);  # 序列化傳到后台數據

    $.ajax({
        url:'/jsonfile/',
        type:'post',
        data:post, # 攜帶的數據
        contentType:'application/json',  # 發送json格式的數據的請求
        dataType:'json',   # 響應回來的解析方式
        success:function (data) {
            var ret=JSON.parse(data);  反序列化
        }
    })
})


# 視圖層：
def add_json(request):
    if request.method=='GET':
        return render(request,'jsonfile.html')

    import json
    res=json.loads(request.body.decode('utf-8')) # json數據從body體內取值

    dic={'status':'100','msg':'登錄成功'}
    # return HttpResponse('ok')
    # 返回給前台json格式
    # return HttpResponse(json.dumps(dic))
    return JsonResponse(dic)  # 直接返回json字符串

補充知識點

補充知識點（1）
    JQ 顯示文字 data.status
    $('.div').text('xx')：修改標簽內容

補充知識點（2）
    靜態文件導入（3種）

作業:
   1 用戶在表單輸入用戶名與密碼，通過Ajax提交給服務器，服務器驗證后返回響應信息，客戶端通過響應信息確定是否登錄成功，
       成功，則跳轉到百度，否則，在頁面上顯示相應的錯誤信息location.href='http://www.baidu.com'

   2  兩種提交數據的方式(urlencoded,json)

   3 手動創建第三張表:
      給紅樓夢這本書新增lqz作者
      給紅樓夢這本書刪除egon作者
      把紅樓夢這本書所有作者替換為lqz
      查詢紅樓夢這本書所有作者的的姓名
      查詢作者名為lqz寫的所有書
   4 上課講的敲一遍


ajax 上傳文件/提交jsan格式的數據 前后端數據交互