前言

第十三届蓝桥杯全国软件和信息技术专业人才大赛(软件类)新开了Web应用开发比赛,已经组织了几次模拟赛和楼赛,这里主要记录模拟赛题目和设计的知识点,帮助参赛者更好的复习琐碎的知识点和代码,有写的不对的地方欢迎指教并讨论.

文章目录

前言
一、题目描述
二、题目分析
三、题目代码

一、题目描述

补全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')
    }
}