表單提交共有四個方法
表單提交方式一：直接利用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;
}
}
》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》
表單提交方式二：使用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>