表單提交方式一：直接利用form表單提交(主線程提交)
html頁面代碼：
1.提交普通內容:
1 <body> 2 <form action="http://localhost:8080/user" method="post"> 3 username:<input type="text" name="username" /><br> 4 password:<input type="password" name="password" /> <br> 5 <input type="submit" value="登錄"> 6 </form>
2.上傳文件:
1 <form id="form-upload" action="/upload" method="post" enctype="multipart/form-data"> 2 <p><input type="file" name="file"></p> 3 <p><input id="btn-upload" type="button" value="提交"></p> 4 </form>
controller代碼：
1.普通內容:
1 @PostMapping("/user") 2 @ResponseBody 3 public String add(String username,String password){ 4 // 省略... 5 }
2.上傳文件:
1 @PostMapping("/upload") 2 public String upload(MultipartFile file) { 3 // 省略... 4 }
文件上傳多個文件時,controller由兩種接收方式:
1. 固定個數,如:固定上傳兩個文件可以
1 @PostMapping("/upload") 2 public String upload(MultipartFile file1, MultipartFile file2) { 3 // 省略... 4 }
2. 相同定位(用途相同),如:某個商品的一組圖片
1 @PostMapping("/upload") 2 public String upload(MultipartFile[] file) { 3 // 省略... 4 }
表單提交方式二：使用ajax提交(啟動新的線程進行異步提交,controller是一樣的,不在進行描述)
html頁面代碼：
1 <body> 2 <form method="post" onsubmit="return false" action="##" id="formtest"> 3 username:<input type="text" name="username" /><br> 4 password:<input type="password" name="password" /> <br> 5 <input type="button" value="登錄" onclick="login()"> 6 </form> 7 <script type="text/javascript" src="/js/jquery.min.js"></script> 8 <script type="text/javascript"> 9 function login() { 10 $.ajax({ 11 //幾個參數需要注意一下 12 type: "POST",//方法類型 13 dataType: "text",//預期服務器返回的數據類型 如果是對象返回的是json 如果是字符串這里一定要定義text 14 /* 15 dataType: 16 要求為String類型的參數，預期服務器返回的數據類型。如果不指定，JQuery將自動根據http包mime信息返回responseXML或responseText，並作為回調函數參數傳遞。可用的類型如下： 17 xml：返回XML文檔，可用JQuery處理。 18 html：返回純文本HTML信息；包含的script標簽會在插入DOM時執行。 19 script：返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數。注意在遠程請求時（不在同一個域下），所有post請求都將轉為get請求。 20 json：返回JSON數據。 21 jsonp：JSONP格式。使用SONP形式調用函數時，例如myurl?callback=?，JQuery將自動替換后一個“?”為正確的函數名，以執行回調函數。 22 text：返回純文本字符串。 23 */ 24 url: "http://localhost:8080/user",//url 25 data: $('#formtest').serialize(),//這個是form表單中的id jQuery的serialize()方法通過序列化表單值 26 success: function (result) { 27 alert("成功") 28 console.log(result);//打印服務端返回的數據(調試用) 29 if (result.resultCode == 200) { 30 alert("SUCCESS"); 31 }; 33 }, 34 error : function(s,s2,s3) { 35 //數據成功傳到后台 也有返回值 但就是報錯 parsererror ：參考 36 https://blog.csdn.net/AinGates/article/details/75250223 38 /* 39 寫了一個ajax方法，后台一切正常，通過瀏覽器的F12工具查看XMLHttpRequest.status返回200，XMLHttpRequest.readyState返回4，也都沒有問題。但是回調函數跳到error里，報parsererror的錯誤。經過排查，發現是因為后台返回時用了@ResponseBody注解（SpringMVC返回json格式的注解），但前台ajax提交沒有定義dataType屬性（定義服務器返回的數據類型） 41 還有一種情況是ajax方法中定義了 dataType:"json"屬性，就一定要返回標准格式的json字符串，要不jQuery1.4+以上版本會報錯的，因為不是用eval生成對象了，用的JSON.parse，如果字符串不標准就會報錯。比如只返回一個簡單的字符串“success”，“fail”， true，false，並不是標准的json字符串就會報錯。 43 首先，jQuery 1.4版本之后對服務端返回的JSON 數據要求比較嚴格，必須嚴格按照JSON的標准來了。 44 */ 45 console.log(s) 46 console.log(s2) 47 console.log(s3) 48 alert("異常！"); 49 } 50 }); 51 } 52 </script> 53 </body>
ajax提交數據是data的形式:
1) 字符串(使用字符串拼接,中間使用&符號連接,可以有變量,使用常規的+進行拼接即可):如
1 $.ajax({ 2 url: '/請求路徑', 3 data: 'username=1&password=2', 4 // 省略... 5 });
2) json格式(標准key-value格式,value也可以是變量):如
1 $.ajax({ 2 url: '/請求路徑', 3 data: { 4 username: 1, 5 password: 2 6 } 7 // 省略... 8 })
3) form表單序列化(普通內容提交大量數據時,或者頁面直接使用表單時使用,內容來自與表單填寫):如
1 $.ajax({ 2 url: '/請求路徑', 3 data: $('#form表單id').serialize(), 4 // 省略... 5 })
以上三種方式ajax會處理數據
4) form表單上傳文件,需要注意的是,文件文件上傳只能通過form表單的方式(使用ajax上傳文件時需要使用FormData對象)
1 $.ajax({ 2 url: '/請求路徑', 3 data: new FormData($('#form表單id')[0]), 4 // 配置processData為false相當於配置表單中enctype="multipart/form-data" 5 // 如果不配置,ajax則會以默認的enctype="application/x-www-form-urlencoded"方式提交 6 processData: false, 7 // contentType正常應該是一個字符串,如'text/html' 8 // 此處給false的原因是告訴ajax,不需要ajax進行處理和干預 9 contentType: false, 10 // 以上兩個屬性只有在上傳文件的時候需要配置 11 // 省略... 12 })
此種方式不僅僅限於此,如:
1 let content = new FormData(); 2 content.append("取個名字",$('#form表單id')[i]); 3 $.ajax({ 4 url: '/請求路徑', 5 data: content, 6 // 配置processData為false相當於配置表單中enctype="multipart/form-data" 7 // 如果不配置,ajax則會以默認的enctype="application/x-www-form-urlencoded"方式提交 8 processData: false, 9 // contentType正常應該是一個字符串,如'text/html' 10 // 此處給false的原因是告訴ajax,不需要ajax進行處理和干預 11 contentType: false, 12 // 以上兩個屬性只有在上傳文件的時候需要配置 13 // 省略... 14 })
append方法可以實現在已有的表單中添加新的數據
關於ajax的參數可以參考:https://www.cnblogs.com/xiao-lin-unit/p/13650796.html
一下是form表單中的一些屬性:
參考：https://blog.csdn.net/a1194821568/article/details/90762922
1 <body> 2 <!--form表單中的屬性： 3 accept-charset 作用： 規定服務器可處理的表單數據字符集。 常用值： UTF-8 - Unicode 字符編碼 、ISO-8859-1 - 拉丁字母表的字符編碼 、 gb2312 - 簡體中文字符集 4 action 作用：規定當提交表單時向何處發送表單數據。 可能的值： 絕對 URL - 指向其他站點（比如 src="www.example.com/example.htm"）、相對 URL - 指向站點內的文件（比如 src="example.htm"） 5 autocomplete 作用：規定是否啟用表單的自動完成功能。 6 enctype 作用：規定在發送表單數據之前如何對其進行編碼 enctype 屬性可能的值： application/x-www-form-urlencoded multipart/form-data text/plain 7 method 作用：規定用於發送 form-data 的 HTTP 方法 常用值:get / post 8 name 作用：規定表單的名稱。 9 novalidate 作用：如果使用該屬性，則提交表單時不進行驗證。 使用方式 ： novalidate="novalidate" 10 target 作用：規定在何處打開 action URL。 常用值： _blank：在新窗口中打開。 _self：默認。在相同的框架中打開。 _parent：在父框架集中打開。 _top：在整個窗口中打開。 framename：在指定的框架中打開。 11 --> 12 <form> 13 <!--常用的表單元素 form 表單 input 表單元素，表單項 select和option 下拉菜單 textarea 文本域 --> 14 <!-- input 屬性 ： 15 value 屬性規定輸入字段的初始值 16 readonly 屬性規定輸入字段為只讀（不能修改） 17 disabled 屬性規定輸入字段是禁用的。 被禁用的元素是不可用和不可點擊的。 被禁用的元素不會被提交。 disabled 屬性不需要值。它等同於 disabled="disabled"。 18 size 屬性規定輸入字段的尺寸 19 maxlength 屬性規定輸入字段允許的最大長度 20 H5之后添加的屬性 21 autocomplete 屬性規定表單或輸入字段是否應該自動完成。 當自動完成開啟，瀏覽器會基於用戶之前的輸入值自動填寫值。 22 提示：您可以把表單的 autocomplete 設置為 on，同時把特定的輸入字段設置為 off，反之亦然。 23 autocomplete 屬性適用於 <form> 以及如下 <input> 類型：text、search、url、tel、email、password、datepickers、range 以及 color。 24 例子 <form action="action_page.php" autocomplete="on"> First name:<input type="text" name="fname"><br> E-mail: <input type="email" name="email" autocomplete="off"><br> </form> 25 autofocus 屬性是布爾屬性。 如果設置，則規定當頁面加載時 <input> 元素應該自動獲得焦點。 26 form 屬性規定 <input> 元素所屬的一個或多個表單。 提示：如需引用一個以上的表單，請使用空格分隔的表單 id 列表。 27 formaction 屬性規定當提交表單時處理該輸入控件的文件的 URL。 28 formaction 屬性覆蓋 <form> 元素的 action 屬性。 29 formaction 屬性適用於 type="submit" 以及 type="image" 30 formenctype 屬性規定當把表單數據（form-data）提交至服務器時如何對其進行編碼（僅針對 method="post" 的表單）。 31 formenctype 屬性覆蓋 <form> 元素的 enctype 屬性。 32 formenctype 屬性適用於 type="submit" 以及 type="image"。 33 formmethod 屬性定義用以向 action URL 發送表單數據（form-data）的 HTTP 方法。 34 formmethod 屬性覆蓋 <form> 元素的 method 屬性。 35 formmethod 屬性適用於 type="submit" 以及 type="image"。 36 formnovalidate 屬性 37 novalidate 屬性是布爾屬性。 38 如果設置，則規定在提交表單時不對 <input> 元素進行驗證。 39 formnovalidate 屬性覆蓋 <form> 元素的 novalidate 屬性。 40 formnovalidate 屬性可用於 type="submit"。 41 formtarget 屬性規定的名稱或關鍵詞指示提交表單后在何處顯示接收到的響應。 42 formtarget 屬性會覆蓋 <form> 元素的 target 屬性。 43 formtarget 屬性可與 type="submit" 和 type="image" 使用。 44 height 和 width 屬性規定 <input> 元素的高度和寬度。 height 和 width 屬性僅用於 <input type="image">。 45 注釋：請始終規定圖像的尺寸。如果瀏覽器不清楚圖像尺寸，則頁面會在圖像加載時閃爍。 46 min 和 max 屬性規定 <input> 元素的最小值和最大值。 47 min 和 max 屬性適用於如需輸入類型：number、range、date、datetime、datetime-local、month、time 以及 week。 48 multiple 屬性是布爾屬性。 如果設置，則規定允許用戶在 <input> 元素中輸入一個以上的值。 49 multiple 屬性適用於以下輸入類型：email 和 file。 50 pattern 屬性規定用於檢查 <input> 元素值的正則表達式。 pattern 屬性適用於以下輸入類型：text、search、url、tel、email、and password。 51 placeholder 屬性規定用以描述輸入字段預期值的提示（樣本值或有關格式的簡短描述）。 該提示會在用戶輸入值之前顯示在輸入字段中。 52 placeholder 屬性適用於以下輸入類型：text、search、url、tel、email 以及 password。 53 required 屬性是布爾屬性。 如果設置，則規定在提交表單之前必須填寫輸入字段。 54 required 屬性適用於以下輸入類型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file. 55 step 屬性規定 <input> 元素的合法數字間隔。 示例：如果 step="3"，則合法數字應該是 -3、0、3、6、等等。 56 --> 58 <!-- 在form標簽中添加Action(提交的地址)和method(post),且有一個submit按鈕（<input type=’submit’>）就可以進行數據的提交，每一個input標簽都需要有一個name屬性，才能進行提交 --> 60 <!-- 用戶名 type 是類型 name --> 61 First name: <input type="text" name="firstname"><br> 62 Last nameee: <input type="text" name="lastname"><br> 63 <!-- 密碼 --> 64 Password: <input type="password" name="pwd"><br><br> 65 <!-- 單選按鈕 --> 66 性別：<input type="radio" name="sex" value="male">Male 67 <input type="radio" name="sex" value="female">Female<br><br> 68 <!-- 復選框 --> 69 愛好：<input type="checkbox" name="vehicle" value="Bike">I have a bike 70 <input type="checkbox" name="vehicle" value="Car">I have a car <br><br> 71 <!-- 文件域 --> 72 選擇文件：<input type="file" name="newfile"> <br><br> 74 <!-- 隱藏域 這個在頁面上不可加 可以保存一些不需要顯示的隱藏信息 用於傳遞值--> 75 <input type="hidden" name="newhidden"> 76 <!-- 將表單里的信息清空 重新填寫 --> 77 <input type="reset" value="清空表單"><br><br> 78 <!-- 用來設置一個按鈕 這個按鈕沒有提價功能 --> 79 <input type="button" value="注冊"> 80 <!--這個不常用 圖片提交按鈕 點擊這個與點擊submit效果相同 插入圖片用 img標簽 而不是input標簽--> 81 <input type="image" name="newimg" ><br><br> 82 <!--常用 提交按鈕 type 是類型 value 是按鈕顯示的內容--> 83 <input type="submit" value="Submit"><br><br> 84 <!-- 85 type=image和type=submit的異同： 86 都可以相應回車，並且都能提交。 87 區別就是type=image的input提交方式會把按鈕點擊的位置坐標x,y提交過去。 88 對於通常的表單應用來說，這樣多一兩個參數並沒有問題，因為我們在接收端中都是按照指定的名稱來處理參數， 89 所以即使多了兩個參數也不會有任何問題。 90 但是在做支付接口的時候（例如：支付寶接口）你就會發現，多出兩個隱藏參數會帶來很麻煩的問題， 91 因為在在提交表單之后，接收端會對參數名稱進行MD5校驗，想想多兩個參數會帶來什么問題。 92 將會直接導致表單校驗不通過，然后支付失敗的問題。 94 所以在在通常網站開發中不提倡使用type=image作為表單的提交按鈕。 95 --> 96 </form> 97 </body>
每天一點點