0
点赞
收藏
分享

微信扫一扫

【蓝桥杯Web】第十三届蓝桥杯(Web 应用开发)楼赛 第27期(实现用户登录功能)

蓝哆啦呀 2022-04-08 阅读 74

前言

文章目录


一、题目描述

补全login.js中的代码,实现用户输入完用户名与密码后,与 ajax 请求到的用户数据进行比对,当用户名和密码匹配成功时,则提示登录成功,效果如下所示.
在这里插入图片描述
在这里插入图片描述


二、题目分析

本题主要考察JQuery中ajax的使用,以及JQuery对类更改的操作,这部分曾在楼赛 第31期中介绍过.下面介绍JQuery的ajax方法.

//使用 AJAX 请求改变 <div> 元素的文本:
$.ajax({url:"demo_test.txt",success:function(result){
    $("#div1").html(result);
}});
//发送一个 HTTP GET 请求到页面并取回结果:
$.get("/try/ajax/demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
});
//使用 HTTP POST 请求从服务器加载数据:
$.post("demo_test.html",function(data,status){
    alert("Data: " + data + "nStatus: " + status);
});

三、题目代码

async function login(username, password) {
    //Todo:补充代码
    var result = await $.get('https://labfile.oss.aliyuncs.com/courses/4450/userlist.json')
    $("#tip1").addClass('fade')
    $("#tip2").addClass('fade')
    var flag = 0
    result.userlist.forEach(item=>{
        if(item.username == username && item.password == password){
            flag = 1
        }
    })
    if(flag == 1){
        $("#tip1").removeClass('fade')
    }else{
        $("#tip2").removeClass('fade')
    }
}
举报

相关推荐

0 条评论