前言
文章目录
一、题目描述
补全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')
}
}