一、總結
1.ajax上傳文件
1 http請求，body體中放文件內容，ajax本質就是發送http請求，所以它可以上傳文件 2 兩種上傳文件的方式，form表單，ajax 3 固定模板 var formdata=new FormData() formdata.append('myfile',$("#id_file")[0].files[0]) # 還可以帶數據 $.ajax({ url:'/uploadfile/', method: 'post', //上傳文件必須寫這兩句話 processData:false, # 預處理數據， contentType:false, # 不指定編碼，如果不寫contentType，默認用urlencoded data:formdata, # formdata內部指定了編碼，並且自行處理數據 success:function (data) { console.log(data) } })
2.ajax提交json格式
$.ajax({ url:'/uploajson/', //寫全，是什么樣就寫什么樣 method:'post', contentType: 'application/json', //data要是json格式字符串 //data:'{"name":"","password":""}', //把字典轉成json格式字符串 //JSON.stringify(dic) //把json格式字符串轉成對象 //JSON.parse(data) data:JSON.stringify({name:$("#id_name1").val(),password:$("#id_password1").val()}), success:function (data) { //返回字符串類型，需要轉成js的對象，字典 //1 如果：django 返回的是HttpResponse，data是json格式字符串，需要自行轉成字典 //2 如果：django 返回的是JsonResponse，data是就是字典 //ajax這個方法做的是，如果響應數據是json格式，自動反序列化 console.log(typeof data) var res=JSON.parse(data) console.log(typeof res) console.log(res.status) console.log(res.msg) } })
二、詳解
form表單文件/數據
ajax上傳文件/數據
用ajax提交json格式數據
index.html
<head> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"> </head> <body> <h1>form表單上傳</h1> <form action="/uploadfile/" method="post" enctype="multipart/form-data"> <p><input type="file" name="myfile"></p> <p>用戶名：<input type="text" name="name"></p> <input type="submit" value="提交"> </form> <hr> <h1>ajax上傳</h1> <input type="file" id="id_file"> <p>用戶名：<input type="text" id="id_name"></p> <button id="btn_file">提交</button> <hr> <h1>通過ajax提交json格式數據</h1> <p>用戶名：<input type="text" id="id_name1"></p> <p>密碼：<input type="text" id="id_password1"></p> <p><button id="btn_json">提交</button></p> </body> <script> //使用原生js發送ajax請求（不講，也不用看） //借助jquery封裝好的ajax方法，發送ajax請求 //點擊button按鈕，觸發ajax請求 $("#btn").click(function () { $.ajax({ url: '/add/', //向哪個地址發送請求 method: 'post', //發送什么請求 //使用jquery，獲取輸入框內的值 //向后端傳輸的數據(沒有指定編碼，默認使用urlencoded) data: {'a': $("#first").val(), 'b': $("#second").val()}, success: function (data) { //數據正常返回，就會觸發該匿名函數的執行，返回的數據就會復制給data console.log(data) //把后端返回的數據，通過dom操作，寫到input框中 $('#result').val(data) }, //請求失敗，就會觸發error的執行，並且把錯誤信息給error error: function (error) { console.log(error) } }) }) //ajax上傳文件 $("#btn_file").click(function () { var formdata = new FormData() //實例化得到一個fromdata對象 //把文件放到對象內 //formdata.append('myfile',文件對象) formdata.append('myfile', $("#id_file")[0].files[0]) //問題:fomdata現在只放了一個文件對象，可不可以放數據？可以 //formdata.append('name','lqz') formdata.append('name', $("#id_name").val()) $.ajax({ url: '/uploadfile/', method: 'post', //上傳文件必須寫這兩句話 processData: false, contentType: false, data: formdata, success: function (data) { alert(data) //console.log(data) //location.href='http://www.baidu.com' } }) }) //ajax提交json格式數據 //ajax無法重定向,點擊提交數據頁面沒有任何顯示 $("#btn_json").click(function () { $.ajax({ url: '/uploadjson/', //路徑寫准確，是什么樣就寫什么樣,ajax無法重定向 method: 'post', contentType: 'application/json', //data要是json格式字符串 //data:'{"name":"","password":""}', //把字典轉成json格式字符串 //JSON.stringify(dic) //把json格式字符串轉成對象 //JSON.parse(data) data: JSON.stringify({name: $("#id_name1").val(), password: $("#id_password1").val()}), success: function (data) { //返回字符串類型，需要轉成js的對象，字典 //1 如果：django 返回的是HttpResponse，data是json格式字符串，需要自行轉成字典 //2 如果：django 返回的是JsonResponse，data是就是字典 //ajax這個方法做的是，如果響應數據是json格式，自動反序列化 console.log(typeof data) var res = JSON.parse(data) console.log(typeof res) console.log(res.status) console.log(res.msg) } }) }) </script>
views.py
def uploadfile(request): file = request.FILES.get('myfile') # name = request.POST.get('name') # print(name) with open(file.name, 'wb') as f: for line in file: f.write(line) return HttpResponse('上傳成功') from django.http import JsonResponse def uploadjson(request): data = request.body print(data) dic = {'status': 100, 'msg': '成功'} print(request.POST) # 有數據？沒有 import json return HttpResponse(json.dumps(dic))#正常 # return JsonResponse(dic) # 報錯，因為內部設置了默認編碼，與需要不符
url.py
from django.urls import path from app01 import views urlpatterns = [ # path('admin/', admin.site.urls), path('uploadfile/', views.uploadfile), path('uploadjson/', views.uploadjson), ]
ps: 配置中可能遇到的問題
settings.py
1 注釋中件件中# 'django.middleware.csrf.CsrfViewMiddleware', 2 設置SLASH=False 3 TEMPLATES 中配置 'DIRS': [os.path.join(BASE_DIR / 'templates')] 4 配置static路徑 STATICFILES_DIRS=[ os.path.join(BASE_DIR,'static')
圖示：
