form表單提交的幾種方式 表單提交方式一：直接利用form表單提交 html頁面代碼： <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Insert title here</title> </head> <body> <form action="http://localhost:8080/user" method="post"> username:<input type="text" name="username" /><br> password:<input type="password" name="password" /> <br> <input type="submit" value="登錄"> </form> </body> </html> controller頁面代碼： package com.help.demo.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.ResponseBody; @Controller public class UserController { @PostMapping("/user") @ResponseBody public String add(String username,String password){ System.out.println("返回值是》》"+username+"---->"+password); String str = "返回值是"+username+password; return str; } } 完成后啟動項目 並訪問http://localhost:8080/query.html 輸入用戶名和密碼 出現下圖表示成 》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》 表單提交方式二：使用ajax提交 html頁面代碼： <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Insert title here</title> </head> <body> <!-- --> <form method="post" onsubmit="return false" action="##" id="formtest"> username:<input type="text" name="username" /><br> password:<input type="password" name="password" /> <br> <input type="button" value="登錄" onclick="login()"> </form> <script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery.easyui.min.js"></script> <script type="text/javascript" src="/js/extJquery.js"></script> <script type="text/javascript" src="/js/extEasyUI.js"></script> <script type="text/javascript"> function login() { $.ajax({ //幾個參數需要注意一下 type: "POST",//方法類型 dataType: "text",//預期服務器返回的數據類型 如果是對象返回的是json 如果是字符串這里一定要定義text 之前我就是定義json 結果字符串的返回一直到額error中去 /* dataType: 要求為String類型的參數，預期服務器返回的數據類型。如果不指定，JQuery將自動根據http包mime信息返回responseXML或responseText，並作為回調函數參數傳遞。可用的類型如下： xml：返回XML文檔，可用JQuery處理。 html：返回純文本HTML信息；包含的script標簽會在插入DOM時執行。 script：返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數。注意在遠程請求時（不在同一個域下），所有post請求都將轉為get請求。 json：返回JSON數據。 jsonp：JSONP格式。使用SONP形式調用函數時，例如myurl?callback=?，JQuery將自動替換后一個“?”為正確的函數名，以執行回調函數。 text：返回純文本字符串。 */ url: "http://localhost:8080/user",//url data: $('#formtest').serialize(),//這個是form表單中的id jQuery的serialize()方法通過序列化表單值 success: function (result) { alert("成功") console.log(result);//打印服務端返回的數據(調試用) if (result.resultCode == 200) { alert("SUCCESS"); } ; }, error : function(s,s2,s3) { //數據成功傳到后台 也有返回值 但就是報錯 parsererror ：參考 https://blog.csdn.net/AinGates/article/details/75250223 / https://blog.csdn.net/AinGates/article/details/75250223 /* 寫了一個ajax方法，后台一切正常，通過瀏覽器的F12工具查看XMLHttpRequest.status返回200，XMLHttpRequest.readyState返回4，也都沒有問題。但是回調函數跳到error里，報parsererror的錯誤。經過排查，發現是因為后台返回時用了@ResponseBody注解（SpringMVC返回json格式的注解），但前台ajax提交沒有定義dataType屬性（定義服務器返回的數據類型） 還有一種情況是ajax方法中定義了 dataType:"json"屬性，就一定要返回標准格式的json字符串，要不jQuery1.4+以上版本會報錯的，因為不是用eval生成對象了，用的JSON.parse，如果字符串不標准就會報錯。比如只返回一個簡單的字符串“success”，“fail”， true，false，並不是標准的json字符串就會報錯。 首先，jQuery 1.4版本之后對服務端返回的JSON 數據要求比較嚴格，必須嚴格按照JSON的標准來了。 */ console.log(s) console.log(s2) console.log(s3) alert("異常！"); } }); } </script> </body> </html> controller類的代碼不變，啟動項目並訪問http://localhost:8080/query.html 返貨成功即可 這里遇到一個問題：就是傳過去數據后，返回值正常，但進入了error ，使用console打印error時出現 parsererror 錯誤原因：ajax的datatype設置問題 我之前設置為 json ,這種只能是接收后台傳回來的json值 傳回其他值就會出現這種錯誤 解決辦法：將datatype的類型改為 text 》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》 表單提交方式三：使用easyui的form插件提交 html頁面代碼：（需要引入Jquery 與 easyui的js文件） <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Insert title here</title> </head> <body> <!-- --> <form method="post" onsubmit="return false" action="##" id="formtest"> username:<input type="text" name="username" /><br> password:<input type="password" name="password" /> <br> <input type="button" value="登錄" onclick="login()"> </form> <script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery.easyui.min.js"></script> <script type="text/javascript" src="/js/extJquery.js"></script> <script type="text/javascript" src="/js/extEasyUI.js"></script> <script type="text/javascript"> function login() { //參考：http://www.jeasyui.net/plugins/166.html $("#formtest").form("submit",{ url:"http://localhost:8080/user", onsubmit:function(){ //這里驗證表單是否可以提交 如果返回false阻止提交 }, success:function (data){ alert("12354") alert(data) } }) } </script> </body> </html> controller類不變，啟動項目並訪問http://localhost:8080/query.html 這個是我定義的頁面返回結果表示成功 》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》 表單提交方式四：form表單提交文件/圖片 需要設定form的enctype=“multipart/form-data” 如果不加這個會傳不過去 附件只能通過submit方法進行提交 》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》 將form表單的一些屬性記在下方以便參考： <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Insert title here</title> </head> <body> <!--form表單中的屬性： accept-charset 作用： 規定服務器可處理的表單數據字符集。 常用值： UTF-8 - Unicode 字符編碼 、ISO-8859-1 - 拉丁字母表的字符編碼 、 gb2312 - 簡體中文字符集 action 作用：規定當提交表單時向何處發送表單數據。 可能的值： 絕對 URL - 指向其他站點（比如 src="www.example.com/example.htm"）、相對 URL - 指向站點內的文件（比如 src="example.htm"） autocomplete 作用：規定是否啟用表單的自動完成功能。 enctype 作用：規定在發送表單數據之前如何對其進行編碼 enctype 屬性可能的值： application/x-www-form-urlencoded multipart/form-data text/plain method 作用：規定用於發送 form-data 的 HTTP 方法 常用值:get / post name 作用：規定表單的名稱。 novalidate 作用：如果使用該屬性，則提交表單時不進行驗證。 使用方式 ： novalidate="novalidate" target 作用：規定在何處打開 action URL。 常用值： _blank：在新窗口中打開。 _self：默認。在相同的框架中打開。 _parent：在父框架集中打開。 _top：在整個窗口中打開。 framename：在指定的框架中打開。 --> <form> <!--常用的表單元素 form 表單 input 表單元素，表單項 select和option 下拉菜單 textarea 文本域 --> <!-- input 屬性 ： value 屬性規定輸入字段的初始值 readonly 屬性規定輸入字段為只讀（不能修改） disabled 屬性規定輸入字段是禁用的。 被禁用的元素是不可用和不可點擊的。 被禁用的元素不會被提交。 disabled 屬性不需要值。它等同於 disabled="disabled"。 size 屬性規定輸入字段的尺寸 maxlength 屬性規定輸入字段允許的最大長度 H5之后添加的屬性 autocomplete 屬性規定表單或輸入字段是否應該自動完成。 當自動完成開啟，瀏覽器會基於用戶之前的輸入值自動填寫值。 提示：您可以把表單的 autocomplete 設置為 on，同時把特定的輸入字段設置為 off，反之亦然。 autocomplete 屬性適用於 <form> 以及如下 <input> 類型：text、search、url、tel、email、password、datepickers、range 以及 color。 例子 <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> autofocus 屬性是布爾屬性。 如果設置，則規定當頁面加載時 <input> 元素應該自動獲得焦點。 form 屬性規定 <input> 元素所屬的一個或多個表單。 提示：如需引用一個以上的表單，請使用空格分隔的表單 id 列表。 formaction 屬性規定當提交表單時處理該輸入控件的文件的 URL。 formaction 屬性覆蓋 <form> 元素的 action 屬性。 formaction 屬性適用於 type="submit" 以及 type="image" formenctype 屬性規定當把表單數據（form-data）提交至服務器時如何對其進行編碼（僅針對 method="post" 的表單）。 formenctype 屬性覆蓋 <form> 元素的 enctype 屬性。 formenctype 屬性適用於 type="submit" 以及 type="image"。 formmethod 屬性定義用以向 action URL 發送表單數據（form-data）的 HTTP 方法。 formmethod 屬性覆蓋 <form> 元素的 method 屬性。 formmethod 屬性適用於 type="submit" 以及 type="image"。 formnovalidate 屬性 novalidate 屬性是布爾屬性。 如果設置，則規定在提交表單時不對 <input> 元素進行驗證。 formnovalidate 屬性覆蓋 <form> 元素的 novalidate 屬性。 formnovalidate 屬性可用於 type="submit"。 formtarget 屬性規定的名稱或關鍵詞指示提交表單后在何處顯示接收到的響應。 formtarget 屬性會覆蓋 <form> 元素的 target 屬性。 formtarget 屬性可與 type="submit" 和 type="image" 使用。 height 和 width 屬性規定 <input> 元素的高度和寬度。 height 和 width 屬性僅用於 <input type="image">。 注釋：請始終規定圖像的尺寸。如果瀏覽器不清楚圖像尺寸，則頁面會在圖像加載時閃爍。 min 和 max 屬性規定 <input> 元素的最小值和最大值。 min 和 max 屬性適用於如需輸入類型：number、range、date、datetime、datetime-local、month、time 以及 week。 multiple 屬性是布爾屬性。 如果設置，則規定允許用戶在 <input> 元素中輸入一個以上的值。 multiple 屬性適用於以下輸入類型：email 和 file。 pattern 屬性規定用於檢查 <input> 元素值的正則表達式。 pattern 屬性適用於以下輸入類型：text、search、url、tel、email、and password。 placeholder 屬性規定用以描述輸入字段預期值的提示（樣本值或有關格式的簡短描述）。 該提示會在用戶輸入值之前顯示在輸入字段中。 placeholder 屬性適用於以下輸入類型：text、search、url、tel、email 以及 password。 required 屬性是布爾屬性。 如果設置，則規定在提交表單之前必須填寫輸入字段。 required 屬性適用於以下輸入類型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file. step 屬性規定 <input> 元素的合法數字間隔。 示例：如果 step="3"，則合法數字應該是 -3、0、3、6、等等。 --> <!-- 在form標簽中添加Action(提交的地址)和method(post),且有一個submit按鈕（<input type=’submit’>）就可以進行數據的提交，每一個input標簽都需要有一個name屬性，才能進行提交 --> <!-- 用戶名 type 是類型 name --> First name: <input type="text" name="firstname"><br> Last nameee: <input type="text" name="lastname"><br> <!-- 密碼 --> Password: <input type="password" name="pwd"><br><br> <!-- 單選按鈕 --> 性別：<input type="radio" name="sex" value="male">Male <input type="radio" name="sex" value="female">Female<br><br> <!-- 復選框 --> 愛好：<input type="checkbox" name="vehicle" value="Bike">I have a bike <input type="checkbox" name="vehicle" value="Car">I have a car <br><br> <!-- 文件域 --> 選擇文件：<input type="file" name="newfile"> <br><br> <!-- 隱藏域 這個在頁面上不可加 可以保存一些不需要顯示的隱藏信息 用於傳遞值--> <input type="hidden" name="newhidden"> <!-- 將表單里的信息清空 重新填寫 --> <input type="reset" value="清空表單"><br><br> <!-- 用來設置一個按鈕 這個按鈕沒有提價功能 --> <input type="button" value="注冊"> <!--這個不常用 圖片提交按鈕 點擊這個與點擊submit效果相同 插入圖片用 img標簽 而不是input標簽--> <input type="image" name="newimg" ><br><br> <!--常用 提交按鈕 type 是類型 value 是按鈕顯示的內容--> <input type="submit" value="Submit"><br><br> <!-- type=image和type=submit的異同： 都可以相應回車，並且都能提交。 區別就是type=image的input提交方式會把按鈕點擊的位置坐標x,y提交過去。 對於通常的表單應用來說，這樣多一兩個參數並沒有問題，因為我們在接收端中都是按照指定的名稱來處理參數， 所以即使多了兩個參數也不會有任何問題。 但是在做支付接口的時候（例如：支付寶接口）你就會發現，多出兩個隱藏參數會帶來很麻煩的問題， 因為在在提交表單之后，接收端會對參數名稱進行MD5校驗，想想多兩個參數會帶來什么問題。 將會直接導致表單校驗不通過，然后支付失敗的問題。 所以在在通常網站開發中不提倡使用type=image作為表單的提交按鈕。 --> </form> </body> </html> ———————————————— 版權聲明：本文為CSDN博主「初出茅廬的小白0101」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。 原文鏈接：https://blog.csdn.net/a1194821568/article/details/90762922