ajax使用post提交表单会在URL中明码显示数据信息

最近在一边做自己的网站，一边学习前端和PHP。学习过程中遇到了一些问题，其中有一个问题是在注册用户时，使用ajax提交表单数据，这些数据会在地址栏中以明码的形式显示出来。

在遇到这个问题时，我的第一想法就是提交方式，因为在我学到的知识中，使用GET提交，会将传输的数据显示出来，但是POST不会。所以我查看了代码中规定的提交方式，是POST没错。但是为什么是明码呢？

于是我就开始找度娘，找各种各样的文章，却是找到了很多信息，但是都是关于如何提交的问题。甚至找到了一篇文章，说是POST并不像人们说的那样可以隐藏数据。找的我甚至都开始怀疑人生了。

在多方查找无果之后，我就试着在代码上动手脚。

我尝试过使用location.reload()和header(“location:url”);可能当时的代码有问题，注册成功之后页面并不会跳转。

于是我就尝试将form标签删除，这回确实不会在地址栏中显示代码了，但是注册成功之后，那些在页面上输入的信息，并不会消失。这也不行。

最后，我还是加上了form标签，但是在标签里面，我又添加了属性action=“url” method=“post”，发现这么做，就不会在地址栏中显示明码信息，页面上输入的信息也消失掉了，而且不用跳转页面。但是数据库中会出现两天相同的数据。

仔细一想，明白了。原来是因为我在form里加入action属性并赋值，这里提交了一次数据；而我使用的ajax同样也提交了一次。相当于点了一下提交，但是做了两次提交的操作，所以会在数据库中看到两条相同的数据。

于是我将action="url"删除掉，但是保留了method属性，于是，成功了！

下面就是代码：

HTML

<form id="form" method="post">
		<table>
			<tr>
				<td class="label" align="right">用户名：</td>
				<td class="val"><input type="text" name="userName" id="user" class="formVal" placeholder="请输入用户名"></td>
			</tr>
			<tr>
				<td class="label" align="right">密码：</td>
				<td class="val"><input type="password" name="pwd" id="pwd" class="formVal" placeholder="请输入密码"></td>
			</tr>
			<tr>
				<td class="label" align="right">请确认密码：</td>
				<td class="val"><input type="password" name="pwd1" id="pwd1" class="formVal" placeholder="请确认密码"></td>
			</tr>
			<tr>
				<td class="label" align="right">邮箱：</td>
				<td class="val"><input type="email" name="email" id="mail" class="formVal" placeholder="请输入邮箱"></td>
			</tr>
			<tr>
				<td class="label" align="right">电话：</td>
				<td class="val"><input type="phone" name="phone" id="phone" class="formVal" placeholder="请输入电话"></td>
			</tr>
			<tr>
				<td class="label" align="right">个性签名：</td>
				<td class="val"><textarea name="signature"  class="formVal" cols="30" rows="10" placeholder="这个家伙很懒，什么都没留下"></textarea></td>
			</tr>
			<tr>
				<td id="msg"></td>
				<td class="sub" align="right"><input type="submit" id="btn" value="提交" onclick="give();"></td>
			</tr>
		</table>
	</form>

JS

<script>
		function give(){
			var elements = document.getElementsByClassName("formVal");
			var formData = new FormData();
			for(var i = 0;i<elements.length;i++){
				formData.append(elements[i].name,elements[i].value);
			}
			var xmlHttp = new XMLHttpRequest();
			xmlHttp.onreadystatechange = function(){
				if(xmlHttp.status == 200&&xmlHttp.readyState == 4){
					var text = xmlHttp.responseText;
					alert(text);
				}
			}
			xmlHttp.open("POST","registe.php");
			xmlHttp.send(formData);
		}
	</script>

在查找的过程中，我又学习了解了如何在JS和PHP进行重定向的知识，可能这就是自主解决问题的魅力所在吧。

我是个新手，只是发表一下个人的想法，如果大家在解决这个问题方面有更好的方案或者方法，请大家告知，不胜感激。