在文章正式開始之前呢，先介紹一個知識點，那就是var和let的區別，查看了各路大佬的文章，也經過各種嘗試，最終得出的結果是，let聲明的變量只在該變量對應的塊中有效，有點局部變量的意思，而且let相對來說更加的嚴格。

正式開始我們的formdata之路，曾經稚嫩的我們在取form表單的值（value）時，都是這樣的

<form action="" method="post">
		<input type="text" name="name" id="name" value="aaa">
		<input type="password" name="password" id="password">
		<input type="submit" name="submit" value="提交" id="submit">
	</form>
	<script>
		var name1 = document.getElementById("name").value; //獲取id為name的值
		var submit1 = document.getElementById("submit");//獲取submit.準備為其綁定事件
		submit1.onclick = function(){alert(name1)}//為submit綁定點擊事件，將name的值在也頁面彈窗顯示
	</script>

上面這種方法獲取表單的值，不僅麻煩，而且代碼量大，我們一起來看看更快更簡潔的方法
第一種：獲取普通input中的值

<!--onsubmit事件是在提交表單時觸發-->
<!-- return 一個函數：是指當函數的返回值位false時，表單不提交，為true時提交-->
<form action="" method="post" target="_blank" onsubmit="return mySubmit(this)">
<!--mySumit函數中的參數this是指form調用該函數時會將form傳入函數中-->
		<input type="text" name="username" >
		<input type="submit" name="submit" >	
	</form>
	<script>
		function mySubmit(form){
		<!--定義formData對象-->
			let formData = new FormData(form);
			<!--利用fromData對象的get方法獲取表單數據-->
			let username = formData.get("username");
			<!--進行一些判斷或者操作-->
			if(username.length < 5){
				alert("用戶名不得小于5位");
				return false;
			}else{
				return true;
			}
			return false;
		}
	</script>

第二種：獲取type為checkbox類型的input的值

<form action="" method="post" onsubmit="return mySubmit(this)">
		<input type="checkbox" name="hoppy" value="music">音樂
		<input type="checkbox" name="hoppy" value="game">游戲
		<input type="checkbox" name="hoppy" value="movie">電影
		<input type="submit" name="" value="提交">
</form>
<script>
		function mySubmit(form){
			//定義formData對象
			let formData = new FormData(form);
			//獲取值，因為get只能獲取一個值，而這里是多選框，所以這里使用getAll方法
			let hoppy1 = formData.getAll("hoppy");
			console.log(hoppy1);
			//頁面數據不進行提交，只是進行測試
			return false;
		}
</script>

到此這篇關于JS更簡單的獲取表單中數據(formdata)的文章就介紹到這了,更多相關js獲取表單數據內容請搜索以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持！