web前端开发之JavaScript：AJAX登陆界面实战

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

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

环境

我用的Windows系统

node.js   v12.18.3

npm      6.14.6

koa2 框架

这些还没配置好的可以去classroom里的第二阶段学习或者看我之前发布的博客内容

初始化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
    <script src='/javascripts/login.js'></script>

接口配置

在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登陆实战到这里就实现了，书山有路勤为径，学海无涯苦作舟，少侠，下次再会!

每篇一句：一日不读书，胸臆无佳想