當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Ajax（form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传）

發布時間：2025/3/19 编程问答 48 豆豆

生活随笔收集整理的這篇文章主要介紹了 Ajax（form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

form表單文件上傳

上菜

file_put.html

<form action="" method="post" enctype="multipart/form-data"> {# 這里必須要請求頭格式才能把上傳文件的對象傳過去 enctype="multipart/form-data"#}姓名 <input type="text" name="user">頭像 <input type="file" name="head"><input type="submit" > </form>

views.py

def file_put(request):if request.method == 'POST':print('post',request.POST) #只有 contenType== urlencoded request 才能拿到這個值print(request.FILES)file_obj = request.FILES.get('head')with open(file_obj.name,'wb') as f:for line in file_obj:f.write(line)return HttpResponse('ok')

上面這個基于form 到表單上傳，在傳遞對象到時候必須要定義請求頭格式??nctype="multipart/form-data" 否則傳遞過來只是一個文件名稱，在服務端接收模版提交的內容必須使用 request.FILES? 否則拿不到數據，通過創建文件句柄，將傳遞數據循環讀取并寫入文件，文件名稱就是接收文件的name值。

請求頭之 contentType

$.ajax contentType 和 dataType , contentType 主要設置你發送給服務器的格式，dataType設置你收到服務器數據的格式。

在http 請求中，get 和 post 是最常用的。在 jquery 的 ajax 中， contentType都是默認的值：application/x-www-form-urlencoded，這種格式的特點就是，name/value 成為一組，每組之間用 & 聯接，而 name與value 則是使用 = 連接。如： wwwh.baidu.com/q?key=fdsa&lang=zh 這是get , 而 post 請求則是使用請求體，參數不在 url 中，在請求體中的參數表現形式也是: key=fdsa&lang=zh的形式。

鍵值對這樣組織在一般的情況下是沒有什么問題的，這里說的一般是，不帶嵌套類型JSON，也就是簡單的JSON，形如這樣：

{a: 1,b: 2,c: 3 }

但是在一些復雜的情況下就有問題了。例如在 ajax 中你要傳一個復雜的 json 對像，也就說是對象嵌數組，數組中包括對象，兄果你這樣傳：

{data: {a: [{x: 2}]} }

這個復雜對象， application/x-www-form-urlencoded 這種形式是沒有辦法將復雜的 JSON 組織成鍵值對形式,你傳進去可以發送請求，但是服務端收到數據為空，因為 ajax 沒有辦法知道怎樣處理這個數據。

這怎么可以呢？

聰明的程序員發現 http 還可以自定義數據類型，于是就定義一種叫 application/json 的類型。這種類型是 text ，我們 ajax 的復雜JSON數據，用 JSON.stringify序列化后，然后發送，在服務器端接到然后用 JSON.parse 進行還原就行了，這樣就能處理復雜的對象了。

$.ajax({dataType: 'json',contentType: 'application/json',data: JSON.stringify({a: [{b:1, a:1}]}) })

這樣你就可以發送復雜JSON的對象了。像現在的 restclient 都是這樣處理的。

Ajax傳遞json數據

file_put.html

<h1>ajax傳遞json數據</h1> <form action="" method="post">姓名<input type="text" name="user">ajax<input type="submit" class="btn"> </form> <script>$('.btn').click(function () {$.ajax({url:'',type:'post',contentType:'application/json', #這里指定了傳輸編碼，用json進行傳輸data:JSON.stringify({ 　　　　　　#指定數據類型為json字符串a:1,b:2}),success:function (data) {console.log(data)}})})

views.py

def file_put(request):if request.method == 'POST':# print('post------',request.POST) #只有 contenType== urlencoded request 才能拿到這個值 request.POST 操作不能再 request.body前面否則會報錯　　　　　　 print('body------',request.body) #請求報文中的請求體 return render(request,'file_put.html')

#輸出

post------ <QueryDict: {}> body------ b'{"a":1,"b":2}' [06/Dec/2018 14:53:09] "POST /file_put/ HTTP/1.1" 200 963 post------ <QueryDict: {'user': ['']}> body------ b'user=' [06/Dec/2018 14:53:09] "POST /file_put/ HTTP/1.1" 200 963

可以看出這里接收到的數據為json類型，如果本地想使用該數據，需要將json反序列化，也就是json.loads

下面看一下看默認情況下ajax 傳輸是按哪種編碼進行傳輸的

#輸出

post------ <QueryDict: {'a': ['1'], 'b': ['2']}> body------ b'a=1&b=2' [06/Dec/2018 14:56:08] "POST /file_put/ HTTP/1.1" 200 918 post------ <QueryDict: {'user': ['']}> body------ b'user=' [06/Dec/2018 14:56:08] "POST /file_put/ HTTP/1.1" 200 918

這里看一看出body 里是按照默認的傳輸編碼?x-www-form-urlencoded? 進行傳輸的

顯示的為 a=1&b=2 的格式，上面說過了這種格式對比較復雜對數據無法進行表示，所以只能使用json字符串進行傳輸。

Ajax文件上傳

首先和上面一樣，編寫好 urls 文件和 views文件，可以正常訪問到咱們的文件上傳頁面

put_file.html

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>文件上傳</title><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <body> {#基于 Ajax文件上傳#} <form action="">姓名 <input type="text" id="user">上傳文件 <input type="file" id="head"><input type="button" class="btn" value="ajax提交"> </form> <script>$('.btn').click(function () {{# 這里的 FormData() 為文件上傳的固定寫法，將需要傳遞的數據以鍵值對的方式進行編輯#}var formdata = new FormData();formdata.append('user', $('#user').val());{# 這里注意一下獲取文件的格式與普通數據不同，下面的示例就是獲取第一個文件對象#}formdata.append('head', $('#head')[0].files[0]);$.ajax({url: '',type: 'post',{# 這里的 contentType:false processData:false 也為固定寫法，分別為編碼類型，和是否預處理數據#}contentType: false,processData: false,data: formdata,success: function (data) {console.log(data)}})}) </script> </body> </html>

views.py

def put_file(request):if request.method == 'POST':print('body______________',request.body)print('post______________',request.POST)print(request.FILES)#獲取文件對象file_obj=request.FILES.get('head')#將文件寫入本地with open(file_obj.name,'wb') as f :for line in file_obj:f.write(line)return HttpResponse('ok')return render(request,'put_file.html')

就是這樣一般網站的上傳文件都是用的Ajax技術做的局部頁面刷新，上傳頭像呀之類的一些東西。

轉載于:https://www.cnblogs.com/mjiu/p/10080216.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的Ajax（form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：五个举措：现代化Jenkins 和终结“
下一篇：重磅！阿里巴巴工程师获得 contain