蓝桥杯web：8【数据交互】实现卡号绑定功能

Rainbow一定行

已于 2022-03-09 15:59:48 修改

阅读量444

点赞数

分类专栏：蓝桥杯web模拟题1 文章标签：蓝桥杯 javascript 前端

于 2022-02-04 22:19:03 首次发布

本文链接：https://blog.csdn.net/weixin_51167834/article/details/122786434

版权

蓝桥杯web模拟题1 专栏收录该内容

10 篇文章 10 订阅

订阅专栏

考试需求

通过 jQuery ajax 请求用户列表数据。

API	接口地址
卡号列表	`js/cardnolist.json`

接口响应示例

补全 index.js 中空缺代码，实现用户输入完卡号与密码后，与 ajax 请求到的卡号数据进行比对，当卡号和密码匹配成功时，则提示绑卡成功，效果如下所示。（需要注意：控制提示信息显示与隐藏要求使用 Bootstrap 提供的 class fade 与 show , 无需重新编写 css 样式）

否则提示绑卡失败，效果如下所示。

html代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>卡号绑定</title>
    <link rel="stylesheet" href="bootstrap.min.css" />
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./js/index.js"></script>
</head>

<body>
    <div id="tip1" class="alert alert-primary alert-dismissible fade" role="alert">
        <strong>成功!</strong> 绑定成功.
    </div>
    <div id="tip2" class="alert alert-warning alert-dismissible fade" role="alert">
        <strong>失败!</strong> 绑定失败.
    </div>
    <div class="container card mt-3">
        <form>
            <h3 class="text-center pt-3">卡号绑定</h3>
            <div class="mb-3">
                <label for="exampleInputCardno" class="form-label">卡号</label>
                <input type="text" required class="form-control" id="exampleInputCardno">
            </div>
            <div class="mb-3">
                <label for="exampleInputPassword" class="form-label">密码</label>
                <input type="password" required class="form-control" id="exampleInputPassword">
            </div>
            <button type="button" id="btnsubmit" class="btn btn-primary mb-3">确定</button>
        </form>
    </div>
</body>

</html>

正确答案：

function bind(cardno, password) {
    //Todo:补充代码

    // 方法一（简写）：
    // $.get('js/cardnolist.json', data => {
    //     let flag = data.cardnolist.some((value) => value.cardno == cardno && value.password == password)
    //     if (flag) {
    //         $('#tip1').removeClass('fade').addClass('show');
    //         $('#tip2').removeClass('show').addClass('fade');
    //     } else {
    //         $('#tip2').removeClass('fade').addClass('show');
    //         $('#tip1').removeClass('show').addClass('fade');
    //     }
    // })

    // 方法二：
    $.ajax({
        url: 'js/cardnolist.json',
        type: "GET",
        dataType: "json",
        success: function (res) {
            let flag = res.cardnolist.some((value) => value.cardno == cardno && value.password == password)
            if (flag) {
                $('#tip1').removeClass('fade').addClass('show');
                $('#tip2').removeClass('show').addClass('fade');
            } else {
                $('#tip2').removeClass('fade').addClass('show');
                $('#tip1').removeClass('show').addClass('fade');
            }
        }
    })

}
$(document).ready(function () {
    $("#btnsubmit").click(function () {
        //卡号
        let cardno = $("#exampleInputCardno").val();
        //密码
        let password = $("#exampleInputPassword").val();
        bind(cardno, password);
    });
});

我写的答案：不知道错在哪里

$.ajax({
        url:'js/cardnolist.json',
        type:'GET',
        dataType:'json',
        success:function(res){
            console.log(res);
            var data=res.cardnolist;
            console.log(data);
            $.each(data,function(i,obj){
                if(cardno==obj.cardno && password==obj.password){
                    $("#tip1").removeClass("fade").addClass("show");
                    $("#tip2").removeClass("show").addClass("fade");                   
                }else{
                     $("#tip2").removeClass("fade").addClass("show");
                     $("#tip1").removeClass("show").addClass("fade");  
                }
               
            })
        }
    })

修改后的答案：

function bind(cardno, password) {
    //Todo:补充代码
    $.ajax({
        url:'js/cardnolist.json',
        type:'GET',
        dataType:'json',
        success:function(res){
            let flag=false;
            console.log(res);
            var data=res.cardnolist;
            console.log(data);
            $.each(data,function(i,obj){
                if(cardno==obj.cardno && password==obj.password) flag=true;
                if(flag)
                {
                    $("#tip1").removeClass("fade").addClass("show");
                    $("#tip2").removeClass("show").addClass("fade");                   
                }else{
                     $("#tip2").removeClass("fade").addClass("show");
                     $("#tip1").removeClass("show").addClass("fade");  
                }
               
            })
        }
    })
}
$(document).ready(function() {
    $("#btnsubmit").click(function() {
        //卡号
        let cardno = $("#exampleInputCardno").val();
        //密码
        let password = $("#exampleInputPassword").val();
        bind(cardno, password);
    });
});

主要知识点：jQuery的ajax以及jQuery设置类样式的方法

Rainbow一定行

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
蓝桥杯web：8【数据交互】实现卡号绑定功能

正确答案：function bind(cardno, password) { //Todo:补充代码 // 方法一（简写）： // $.get('js/cardnolist.json', data => { // let flag = data.cardnolist.some((value) => value.cardno == cardno && value.password == password) // if
复制链接

扫一扫