AJAX简单实现登录效果

在日常生活中，我们使用的app或者网站，都需要登陆账户才能进行下一步操作，例如华为云的登陆界面：

那么，如何简单实现登陆页面的一个效果呢？之前学习过html5的form表单可以实现这一简单样式，今天我们用AJAX来实现一下简单的用户登陆页面，输入帐号和密码后，通过AJAX提交到服务端接口进行处理，由服务器端判断并返回登陆结果，用户登陆页面将服务器返回结果弹出。话不多说，走起！

环境

我用的Windows系统

node.js   v12.18.3

npm      6.14.6

koa2 框架

初始化node.js环境

cd d:\koa2 koa2 login //创建login的配置文件 cd login && cnpm install npm start

显示这个就说明启动成功了

然后打开浏览器 输入http://localhost:3000/  测试一下效果

用户登陆首页

页面路径： views/index.pug

block content h1 登陆华为帐号 div 华为帐号： input(type='text' id='account') div 帐号密码： input(type='password' id='pwd') button(type='button' id='btn') 登陆

向服务器提交数据

页面路径： public/javascripts/login.js

var btn = document.getElementById("btn"); var account = ''; var pwd = ''; btn.onclick = function(){ account = document.getElementById("account").value; pwd = document.getElementById('pwd').value; ajax({ type: 'post', url: '/login', data:{ account: account, pwd: pwd }, success: function(data){ alert(data) } }) function ajax(opt){ var defaultParam = { type: 'get', url: '#', data: {}, async: true, success: function(){} } for(var key in opt){ defaultParam[key] = opt[key]; } var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); } var paramStr = ""; for(var k in defaultParam.data){ paramStr += k + '=' + defaultParam.data[k] + '&'; } paramStr = paramStr.substr(0,paramStr.length - 1); console.log(paramStr); if(defaultParam.type == 'get'){ xhr.open(defaultParam.type,defaultParam.url + '?' + paramStr,defaultParam.async); xhr.send() }else{ xhr.open(defaultParam.type,defaultParam.url,defaultParam.async); // post请求 xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); xhr.send(paramStr) } xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ defaultParam.success(xhr.responseText); } } } } }

载入login.js文件

login.js 处理登陆提交及ajax请求发送

页面路径： views/layout.pug

block content

接口配置

在login.js中ajax()方法中url对应的接口在这个文件配置

页面路径：app.js

app.use(async function (ctx){ if(ctx.path == "/login"){ if(ctx.request.body.account == 'yunqinanhai' && ctx.request.body.pwd == '123456'){ ctx.body = '登陆成功 ！' }else{ ctx.body = '登陆失败 ！' } } }) module.exports = app

测试效果

google浏览器访问 localhost:3000

账号和密码必须都匹配正确,返回 "登陆成功 !"

否则 返回 "登陆失败"

测试帐号：yunqinnahai  密码：123456   （app.js可以修改你要测试的账号密码）

密码不正确，就返回失败。

结语

这个实战给我最大的启示就是文档是一个好东西，锻炼看文档的能力会自己接受新东西的速度变快。同时遇到代码错误是，需要冷静，不要急躁，静下来心来处理问题，有些看似简单的细节忽略了，项目同样跑不起来。好啦，这个AJAX登录页面搭建到这里也结束了，咱们下次再会。

Ajax

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。