表單提交enctype參數詳解之:application/x-www-form-urlencode和multipart/form-data

application/x-www-form-urlencode

我們在提交表單的時候,form表單參數中會有一個enctype的參數。enctype指定了HTTP請求的Content-Type。
默認情況下,HTML的form表單的enctype=application/x-www-form-urlencoded。
application/x-www-form-urlencoded是指表單的提交,并且將提交的數據進行urlencode。默認情況下,我們所有的表單提交都是通過這種默認的方式實現的。

在火狐瀏覽器下,我們可以看一下提交數據的過程:
1.png
我們可以看到Content-type:

Content-Type      
application/x-www-form-urlencoded; charset=UTF-8  

然后繼續看一下原始請求數據,原始的請求數據被urlencode了。
2.png
Ajax默認也是通過HTTP application/x-www-form-urlencoded提交數據。可以看下Jquery的源碼:
3.png

multipart/form-data

一般情況下,我們如果要在表單中上傳文件,一般會將form的enctype參數設置為multipart/form-data。這種方式只支持POST的請求方式。
Contype-Type=multipart/form-data情況的時候,都會通過一個特殊的字符串來將原始POST數據進行分割。
我們可以看到下面的請求中Content-type的類型:

Content-Type      
multipart/form-data; boundary=---------------------------66841812532223  

其中boundary=---------------------------66841812532223,為分割符號。
其中數據塊開始的分隔符 =={boundary} 會在前面加上“==”
數據塊結束的分隔符 =={boundary}== 會在后面加上“==”
4.png
繼續看下原始數據,我們可以清晰的看到,各種請求數據被boundary值進行了分割。
5.png
雖然這些知識點很早就知道了,但是知其然知其所以然可以讓我們深入每一個技術細節。

application/json

有些時候,我們會直接提交Content-type是json數據格式的請求。
例如:

var data = {'title':'test', 'sub' : [1,2,3]};  
$http.post(url, data).success(function(result) {  ...  
});  

請求:

POST http://www.example.com HTTP/1.1  
Content-Type: application/json;charset=utf-8  {"title":"test","sub":[1,2,3]}  

這種情況下,請求的Content-Type是Json的數據格式,http body中的內容就是請求的json數據。
如果是php的話,需要通過 php://input來接收POST中的原始數據信息。
如果是Java,則需要下面的方式來讀取HTTP 請求BODY中的數據

protected void processRequest(HttpServletRequest request,HttpServletResponse response) {try {request.setCharacterEncoding("UTF-8");int size = request.getContentLength();  System.out.println(size);  InputStream is = request.getInputStream();  byte[] reqBodyBytes = readBytes(is, size);  String res = new String(reqBodyBytes);  System.out.println(res);  response.setContentType("text/html;charset=UTF-8");  response.setCharacterEncoding("UTF-8");  response.getOutputStream().write(res.getBytes("utf-8"));  response.flushBuffer();  } catch (Exception e) {}
}public static final byte[] readBytes(InputStream is, int contentLen) {if (contentLen > 0) {int readLen = 0;  int readLengthThisTime = 0;  byte[] message = new byte[contentLen];  try {while (readLen != contentLen) {readLengthThisTime = is.read(message, readLen, contentLen - readLen);if (readLengthThisTime == -1) {// Should not happen.  break;}readLen += readLengthThisTime;}return message;} catch (IOException e) {// Ignore  // e.printStackTrace();  }  }return new byte[] {};  
}  

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/247586.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/247586.shtml
英文地址,請注明出處:http://en.pswp.cn/news/247586.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

內網端口映射工具

由于開發微信需要一個公網域名,需要將本地端口映射到外網域名,最熱的工具是ngrok,但被微信屏蔽了,這里使用的是natapp,環境是mac,windows下可使用nat123、花生殼等工具實現同樣功能。 簡單記錄一下過程。 …

iOS----------iPhone導出手機所有短信

第一步:手機連接到itunes 選擇本電腦備份 備份的時候不要加密 然后立即備份 第二步:前往文件夾,找到itunes的備份路徑~/Library/Application Support/MobileSync/Backup 在這目錄下搜索 3d0d開頭的文件,這就是 iPhone 短信的…

跨站點腳本(XSS)

1. 簡介 跨站點腳本(XSS)是當前web應用中最危險和最普遍的漏洞之一。安全研究人員在大部分最受歡迎的網站,包括Google, Facebook, Amazon, PayPal等網站都發現這個漏洞。如果你密切關注bug賞金計劃,會發現報道最多的問題屬于XSS。為了避免跨站腳本,瀏覽器也有自己的過濾器,但安…

spring webscoket服務端使用記錄

記錄spring4中websocket的使用方式 pom jar包配置 <dependency> <groupId>org.springframework</groupId> <artifactId>spring-websocket</artifactId> <version>${spring.version}</version> </dependency> <depen…

MVC是什么?(轉載)

MVC (Modal View Controler)本來是存在于Desktop程序中的&#xff0c;M是指數據模型&#xff0c;V是指用戶界面&#xff0c;C則是控制器。使用MVC的目的是將M和V的實現代碼分離&#xff0c;從而使同一個程序可以使用不同的表現形式。比如一批統計數據你可以分別用柱狀圖、餅圖來…

CSRF攻擊原理及防御

CSRF攻擊原理及防御 一、CSRF攻擊原理 CSRF是什么呢&#xff1f;CSRF全名是Cross-site request forgery&#xff0c;是一種對網站的惡意利用&#xff0c;CSRF比XSS更具危險性。想要深入理解CSRF的攻擊特性我們有必要了解一下網站session的工作原理。   session我想大家都不…

H3C FTP配置示例

轉載于:https://www.cnblogs.com/fanweisheng/p/11156596.html

用dotnet自帶的mail類發郵件出現的問題

在使用dotnet自帶的mail類發送郵件的時候&#xff0c;因為默認的smtp端口是25&#xff0c;如果更改了smtp的端口號&#xff0c;則需加上MailMessage msg &#xff1d; new MailMessage();msg.Fields.Add("http://schemas.microsoft.com/cdo/configuration/smtpserverport&…

Angular CLI ng 指令指南

Angular CLI 使用教程指南參考 Angular CLI 現在雖然可以正常使用但仍然處于測試階段. Angular CLI 依賴 Node 4 和 NPM 3 或更高版本. 安裝

spring源碼閱讀(1/4) - Bean生成

上午去繳了上次沒帶駕駛證的扣分罰款&#xff0c;最近在圖書館沒事就看曾國藩家書&#xff0c;曾國藩說人要明強。光強沒有用&#xff0c;你要明強。也就是說要強的有道理。曾國藩又說&#xff0c;做學問不能做死學問&#xff0c;做學問其實很重要的事就是能懂得孝悌&#xff0…

NodeJS解決跨域問題:Access-Control-Allow-Origin

今天在玩vue-resource時&#xff0c;后臺使用nodejs來提供數據&#xff0c;由于需要跨域&#xff0c;在網上也找到了解決方法。 vue-resource代碼(其實就是ajax技術)&#xff1a; this.$http.get({url:"http://localhost:3000/getdata"}) .then(function (data) {co…

windows10系統下MongoDB的安裝及環境配置

windows10系統下MongoDB的安裝及環境配置&#xff1a; MongoDB的安裝 下載地址&#xff1a; https://www.mongodb.com/download-center (這是windows10環境下的教程&#xff01;請注意&#xff01;) 下載后&#xff0c;我們點擊mongodb-win32-x86_64-2008plus-ssl-3.4.3-signed…

Net EF to MySQL生成edmx文件時報錯:StrongTypingException:表“TableDetails中列“IsPrimaryKey的值為DBNull...

使用Net寫項目&#xff0c;數據庫用的MySQL&#xff0c;EF生成edmx文件時&#xff0c;報錯&#xff0c;StrongTypingException:表“TableDetails"中列“IsPrimaryKey"的值為DBNull。 解決方法&#xff1a; 1.重啟MySQL服務 2.MySQL中運行下以下命令&#xff1a; use …

MongoDB之在mac上設置環境變量

要下班&#xff0c;簡介做個筆記。設置環境變量在基于unix/linux的操作系統下進行程序開發&#xff0c;使用環境變量將會方便。通過設置環境變量將可以在任意目錄通過輸入程序名來執行設定目錄下的程序。不需要通過cd將工作目錄改變到程序目錄再執行程序。而且免去了輸入"…

popup a new windows

popup a new windows window.open(url, newwindow, height500, width850, top0, left0, toolbarno, menubarno, scrollbarsno, resizableno,locationno, statusno); 轉載于:https://www.cnblogs.com/sandy_liao/archive/2010/06/24/1764533.html

CSS clip:rect矩形剪裁功能

CSS中有一個屬性叫做clip&#xff0c;為修剪&#xff0c;剪裁之意。配合其屬性關鍵字rect可以實現元素的矩形裁剪效果。此屬性安安穩穩地存在于CSS2.1中&#xff0c;且使用上基本上沒有類似于max-height/display:table-cell等瀏覽器的兼容性問題。 根據Dreamweaver的自動提示&a…

CSS隱藏元素的十四種方法

通過設置width:0或者height:0隱藏一個元素&#xff0c;文字隱藏可以設置color為背景色或transparent&#xff0c;但內容還在&#xff0c;所以用font-size:0&#xff1b; 將元素的opacity設置為0&#xff0c;元素本身還在&#xff0c;只是看不見&#xff1b; 通過絕對定位將元…

jquery.lazyload.js詳解

簡介lazyload.js用于長頁面圖片的延遲加載&#xff0c;視口外的圖片會在窗口滾動到它的位置時再進行加載&#xff0c;這是與預加載相反的。優點&#xff1a;它可以提高頁面加載速度&#xff1b;在某些情況清晰它也可以幫助減少服務器負載。安裝bower安裝&#xff1a;$ bower in…

Spring Boot Cache使用與整合

參考&#xff1a; 史上最全的Spring Boot Cache使用與整合Spring Cache擴展&#xff1a;注解失效時間主動刷新緩存 項目地址使用本地Caffeine緩存 引入依賴包 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starte…

vue-cli的打包配置文件

轉載原文: 詳解 vue-cli 的打包配置文件代碼&#xff08;給大家寫寫注釋&#xff09;. 一、vue-cli都做了什么 1、build/dev-server.js 文件 項目node的啟動文件&#xff0c;這里面做了webpack配置和node操作&#xff0c; 2、build/webpack.base.conf.js webpack基本配置文件…