ajax的登录页面，发送post方式

最新推荐文章于 2022-06-01 23:23:45 发布

小刘先生很努力

最新推荐文章于 2022-06-01 23:23:45 发布

阅读量1.5k

点赞数 2

本文链接：https://blog.csdn.net/lzfengquan/article/details/104711619

版权

	<style>
		form{
			position: relative;
		}
		span{
			position: absolute;
			color:red;
			display: none;
		}
	</style>
</head>
<body>
	**<!-- 
	 登录中，一般都会涉及到form表单，
	 但是要注意的是，form表单会自带有提交事件
	 如果我们需要就可以把这个默认事件阻止，
	 在form标签里，button标签等价于<input type='submit'>
	 <form action="" method="post">
	 	<input type="submit" value=""/>
	 </form>	 -->**
	<form>
		<span>用户名或者密码错误</span>
		</br>
		<laber>用户名：</laber><input type="text" class='username' />
		</br>
		<laber>密码：</laber><input type="text" class='password' />
		</br>
		<button>登录</button>
	</form>
	<!-- 
	  使用前后端分离的方式，使用ajax的方式发送请求，不是表单的自动提交
	  1 方式一：可以使用form表单的提交方式
	    方式二：可以使用button按钮的提交方式
	  2 获取input元素的信息
	  3 验证信息的格式，是否符合要求。表单验证
	  4 发送一个post的请求方式 暗文发送，相对于get安全
	    ajax发送到后端验证 4个步骤
	  5 根据后端返回的信息，给客户提醒，格式正确
	    正确就跳转页面 ，错误就从新填写
	  -->
	<script type="text/javascript">
		// 想要操作谁就要先获取这个元素
		let nameIpt = document.querySelector('.username')
		let passIpt = document.querySelector('.password')
		let errorInfo=document.querySelector('span')
		// 表单的提交事件
		// 绑定一个事件用来获取用户输入的内容
		// 1 表单的提交事件
		var form = document.querySelector('form') //获取form的表单元素
		form.onsubmit = function(e) { //form 表单的提交事件，当表单提交的时候就会触发
			// ajax提交方式我们要考虑一下兼容问题
			e = e || window.event
			// 因为涉及到form表单的自动提交，所以我们要阻止默认行为
			e.preventDefault()
			// console.log('提交之前，先打印')
			
			// 2 获取完元素后句可以得到里面的值信息
			let uname = nameIpt.value
			let upass = passIpt.value
			// console.log(uname,upass)
			
			// 3验证格式的信息是否符合要求
			// 非空验证 和 格式验证（正则）
			if (uname === '' || upass === '') {
				prompt('用户名或密码为空，请填写完整信息')
				return //直接阻止，不在运行后边的代码
			}
			// if(){在做一个正则的验证uname和upass的填写方式
			// }
			// 4 发送请求
			let url = ''
			var xhr = new XMLHttpRequest()
			xhr.open('post', url) //post 请求要有请求头
			xhr.onload = function() {
				console.log(JSON.parse(xhr.responseText))
				// 一般为了方便，后端也会也成JSON格式的信息，我们前端也用JSON，就可以解析后端的信息值了
				var res = JSON.parse(xhr.response)
				// 根据后端给的响应，在这里判断他们的信息值
				if (res.code === 0) { //代表失败
					// 登录失败就给提示
					errorInfo.style.display='block'
				} else {
					// 成功就跳转页面
					window.location.href = '跳转的地址'
				}
			}
			xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded') //请求头
			xhr.send(`username=${uname}&password=${upass}`) //发送请求到后端验证
		}
	</script>


	<!-- 	  
	  <script type="text/javascript">
	  	// button按钮的点击事件
		var btn=document.querySelector('button')//获取form表单里的button按钮
		btn.onclick=function(e){
			// 兼容问题
			e=e||window.event 
			// 阻止默认时间
			e.preventDefault()
			console.log('打印')
		}
	  </script> -->
</body>