关于js返回[object HTMLInputElement]问题的解决

看了多篇文章，除去那些自己不小心，没加value啥的。自己总结一下。<body>姓名：<input type="text" id="name" />年龄：<input type="text" id="age"/><input type="button" value="提交" id="but" /><script>var name = do

惜丶

16972人浏览 · 2020-08-18 17:02:21

惜丶 · 2020-08-18 17:02:21 发布

看了多篇文章，除去那些自己不小心，没加value啥的。自己总结一下。

<body>
		姓名：<input type="text" id="name" />
		年龄：<input type="text" id="age"/>
		<input type="button" value="提交" id="but" />
		<script>
			var name = document.getElementById('name')
			var age = document.getElementById('age')
			var but = document.getElementById('but')
			
			but.onclick = function(){
				const xhr = new XMLHttpRequest()
				var namevalue = name.value
				var agevalue = age.value
				alert(name)
				console.log(name)
				var parm = 'name='+ namevalue +'&age='+agevalue
				
				
				 xhr.open('get', 'http://127.0.0.1:3000/get?'+parm)
				 xhr.send()
				xhr.onload = function (){	
					console.log(xhr.responseText)
			    }
			}
		</script>
	</body>

修改前结果：

以上浏览器并无报错，但获取的name元素的值，一直都是[object HTMLInputElement]，无法得到value值。

通过查找发现，原来是因为所设参数与HTML内置参数相同，造成在传递过程中，自动转成HTML参数进行传递。

解决办法便是避开。

<body>
		姓名：<input type="text" id="username" />
		年龄：<input type="text" id="age"/>
		<input type="button" value="提交" id="but" />
		<script>
			var username = document.getElementById('username')
			var age = document.getElementById('age')
			var but = document.getElementById('but')
			
			but.onclick = function(){
				const xhr = new XMLHttpRequest()
				var namevalue = username.value
				var agevalue = age.value
				alert(username)
				console.log(username)
				var parm = 'name='+ namevalue +'&age='+agevalue
				
				
				 xhr.open('get', 'http://127.0.0.1:3000/get?'+parm)
				 xhr.send()
				xhr.onload = function (){	
					console.log(xhr.responseText)
			    }
			}
		</script>
	</body>

修改后结果：