ajax实现用户登录

1.首先编写好html需要的基础样式,导入jquery链接

2.给获取验证码的输入框添加一个点击事件,添加一个函数,我们所有的操作都要在这个函数内执行,,判断用户输入的手机号是否正确,这里用到了正则表达式,也可以用普通的判断,

 然后我们创建ajax对象请求数据,readyState为4,代表已经连接上服务器了,status为200,代表服务器已经给前端返回了数据,我们在将获取到的json数组转成对象,再把服务器传给前端的验证码的值拿出来,自动弹出到验证码输入框,

 然后我们编写倒计时的js函数代码,初始时间设为60,当用户点击获取验证码后,里面的文本自动转化成自减的倒计时,当倒计时等于0时,清空倒计时的函数数据,文本变回'请重新获取验证码',用户可重复操作

 接下来我们再给立即登录的button按钮添加点击事件添加函数,注意还是写在获取验证码的函数里的,已经获取到后,我们把用户的手机号码添加到本地存储,再跳转到我们的个人用户页面

下面是个人用户的简易页面代码,上面会将用户的手机号码一起传到用户个人中心页面,当用户点击退出登录后,手机号码会隐藏起来,显示立即登录按钮;