vue雙向綁定原理，js如何獲取input裡面的值

同事跟我說他用jQuery取不到頁面上隱藏元素input的值，他的html頁面大概內容如下。

<!DOCTYPE html>
<html lang="zh">
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="jslib/jquery-1.11.2.min.js"></script>
	<title>淺談Html頁面內容執行順序</title>
	<script type="text/javascript">
		var userId = $('#hiddenUserId').val();
		var contextPath = $('#hiddenContextPath').val();
		var userName = $('#hiddenUserName').val();
	</script>
</head>
 
<body>
	<input type="hidden" id="hiddenUserId" value="101" />
	<input type="hidden" id="hiddenContextPath" value="/web" />
	<input type="hidden" id="hiddenUserName" value="小明" />
</body>
 
</html>

頁面中的JS腳本在head中，JS腳本要讀取的input在body中。瀏覽器對html頁面內容的加載是順序加載，也就是在html頁面中前面先加載，因此當加載到JS腳本時，input還沒有加載到瀏覽器中。JS是一種解釋性的腳本，也是從上而下順序執行，由於這段JS代碼是立即執行的，所以當JS在執行的時候，讀取不到input的值。

最直接的修改方法是把JS放到網頁的最下面執行。

<!DOCTYPE html>
<html lang="zh">
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="jslib/jquery-1.11.2.min.js"></script>
	<title>淺談Html頁面內容執行順序</title>	
</head>
 
<body>
	<input type="hidden" id="hiddenUserId" value="101" />
	<input type="hidden" id="hiddenContextPath" value="/web" />
	<input type="hidden" id="hiddenUserName" value="小明" />
	
	<script type="text/javascript">
		var userId = $('#hiddenUserId').val();
		var contextPath = $('#hiddenContextPath').val();
		var userName = $('#hiddenUserName').val();
	</script>
</body>
 
</html>

把JS放到網頁的最下面，這樣在JS執行的時候，網頁內容都已經加載完畢。把JS放在網頁的最下面方法並不是最好的解決方法，大部分情況JS並不是總能放在網頁的最下面。這時可以用window的onload事件，onload事件在整個頁面都加載完成後才觸發，可以把JS腳本放在onload裡面執行。不同瀏覽器onload事件添加方式也不一樣。

IE下事件：

window.attachEvent('onload', function(){
			var userId = $('#hiddenUserId').val();
			var contextPath = $('#hiddenContextPath').val();
			var userName = $('#hiddenUserName').val();
		});

Chrome/Firefox等DOM標準事件：

window.addEventListener('load', function(){
			var userId = $('#hiddenUserId').val();
			var contextPath = $('#hiddenContextPath').val();
			var userName = $('#hiddenUserName').val();
		});

由於不同瀏覽器的事件添加方式不一樣，jQuery為我們提供了通用的初始化方法，該方法在頁面加載完成時觸發。

$(function(){
			var userId = $('#hiddenUserId').val();
			var contextPath = $('#hiddenContextPath').val();
			var userName = $('#hiddenUserName').val();
		});

上面方法本質就是添加onload監聽事件。

最終修改後的頁面

<!DOCTYPE html>
<html lang="zh">
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="jslib/jquery-1.11.2.min.js"></script>
	<title>淺談Html頁面內容執行順序</title>
	<script type="text/javascript">		
		$(function(){
			var userId = $('#hiddenUserId').val();
			var contextPath = $('#hiddenContextPath').val();
			var userName = $('#hiddenUserName').val();
		});
	</script>
</head>
 
<body>
	<input type="hidden" id="hiddenUserId" value="101" />
	<input type="hidden" id="hiddenContextPath" value="/web" />
	<input type="hidden" id="hiddenUserName" value="小明" />
</body>
 
</html>

原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/234139.html

vue雙向綁定原理，js如何獲取input裡面的值

相關推薦

發表回復