JQuery ajax请求

news2024/11/25 16:00:07

实现卡号绑定功能

通过 jQuery ajax 请求用户列表数据。
API    接口地址
卡号列表    js/cardnolist.json
接口响应示例
补全 index.js 中空缺代码,实现用户输入完卡号与密码后,与 ajax 请求到的卡号数据进行比对,当卡号和密码匹配成功时,则提示绑卡成功,效果如下所示。(需要注意:控制提示信息显示与隐藏要求使用 Bootstrap 提供的 class fade 与 show , 无需重新编写 css 样式)

$.ajax({
        method: "GET",
        url: "js/cardnolist.json",
        dataType: "json",
        success: data => {
            let flag = false;
            let cardnolist = data.cardnolist;
            $(cardnolist).each((index,item) => {
                if(cardno == item.cardno && password == item.password) flag = true;
            })
            if(flag){
                $("#tip1").attr("class","alert alert-primary alert-dismissible show");
                $("#tip2").attr("class","alert alert-warning alert-dismissible fade");
            }
            else{
                $("#tip2").attr("class","alert alert-warning alert-dismissible show");
                $("#tip1").attr("class","alert alert-primary alert-dismissible fade");
            }
        }
    })

天气预报查询

补全 js/index.js 中 JavaScript 空缺代码,通过 jQuery ajax 请求杭州一周天气预报数据。

API    接口地址
一周天气预报    js/weather.json
接口响应示例
将请求到的一周天气预报数据绑定到 HTML 中,最终效果图如下所示。

//TODO:请补充代码
     $.ajax({
        type:"GET",
        url:"js/weather.json",
        success:function({result}){
            for(let i=0;i<result.length;i++){
                $("img")[i].src=result[i].weather_icon
                $(".item-mess")[i].children[0].innerHTML=result[i].weather
                $(".item-mess")[i].children[1].innerHTML=result[i].temperature
                $(".item-mess")[i].children[2].innerHTML=result[i].winp
                $(".item-mess")[i].children[3].children[0].innerHTML=result[i].days
                $(".item-mess")[i].children[3].children[1].innerHTML=result[i].week
                
            }
        }
     })

粒粒皆辛苦

请完成 index.html 文件中的 TODO 部分。

完成数据请求(数据来源 ./data.json)。
data.json 中的数据中英文对照如下:
英文名称    中文名称
wheat    小麦
soybean    大豆
potato    马铃薯
corn    玉米
在页面的折线图和饼形图中正确显示粮食产量数据。其中折线图为五年数据,饼图只显示 2022 年数据。
完成后,最终页面效果如下:

// TODO: 待补充代码
      axios.get('./data.json').then(res=>{
        let data = res.data.data;
        let source=[
              ["全部", "2017", "2018", "2019", "2020", "2021", "2022"],
              ["小麦"],
              ["大豆"],
              ["马铃薯"],
              ["玉米"],
            ]
        for(let item in data){
          source[1].push(data[item].wheat);
          source[2].push(data[item].soybean);
          source[3].push(data[item].potato);
          source[4].push(data[item].corn);
        }
        option.dataset.source= source;
        myChart.setOption(option);
      })

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1589541.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

使用 Docker 部署 Linux-Command 命令搜索工具

1&#xff09;介绍 Linux-Command GitHub&#xff1a;https://github.com/jaywcjlove/linux-command Linux-Command 仓库搜集了 580 多个 Linux 命令&#xff0c;是一个非盈利性的仓库&#xff0c;生成了一个 Web 网站方便使用&#xff0c;目前网站没有任何广告&#xff0c;内…

JVM参数列表

-client :设置JVM使用client模式,特点启动较快(神机不明显(I5/8G/SSD)) -server :设置JVM使用server模式。64位JDK默认启动该模式 -agentlib:libname[options] :用于加载本地的lib -agentlib:hprof :用于获取JVM的运行情况 -agentpath:pathnamep[options] :加载制定路径的本…

共享内存详解

共享内存是操作系统在内存中开辟一块空间&#xff0c;通过页表与共享区建立映射关系&#xff0c;使两个进程看到同一份资源&#xff0c;实现进程间通信。 1、创建共享内存 参数&#xff1a;第一个参数为key&#xff0c;一般使用ftok()函数生成&#xff0c;key值不能冲突&#…

副业天花板流量卡推广,小白也可轻松操作

在如今的互联网时代&#xff0c;手机已经不仅仅是一款工具&#xff0c;更像是我们生活中的一部分&#xff0c;那么手机卡也是必需品&#xff0c;但存在的问题就是:很多手机卡的月租很贵&#xff0c;流量也不够用。所以大家都在寻找一个月租低&#xff0c;流量多的卡&#xff0c…

Java-Doc

Java-Doc javdoc命令是用来生成自己的API文档的 参数信息&#xff1a;author作者名version版本号since知名需要最早使用的jdk版本param参数名return返回值情况throws异常抛出情况 1.参数信息的使用&#xff1a; 未完待续... ...

【好消息】思维100活动历年真题模拟题700多道上线了,供反复吃透

今天是星期五&#xff0c;距离4月20日举办的上海小学生 2024年春季思维100活动线上比赛还有8天的时间&#xff0c;明天、后天的周末是可以用来备考的大块时间&#xff0c;报名了的同学要充分利用了。 为了帮助各位小朋友了解思维100活动的历年考试真题、官方发布的参考样题&…

【数组】5螺旋矩阵

这里写自定义目录标题 一、题目二、解题精髓-循环不变量三、代码 一、题目 给定⼀个正整数 n&#xff0c;⽣成⼀个包含 1 到 n^2 所有元素&#xff0c;且元素按顺时针顺序螺旋排列的正⽅形矩阵。 示例: 输⼊: 3 输出: [ [ 1, 2, 3 ], [ 8, 9, 4 ], [ 7, 6, 5 ] ] 二、解题精髓…

docker最简单教程(使用dockerfile构建环境)

一 手里有的东西 安装好的docker+dockerfile 二 操作 只需要在你的dockerfile文件下执行命令 docker build -t="xianhu/centos:gitdir" . 将用户名、操作系统和tag进行修改就可以了,这就相当于在你本地安装了一个docker环境,然后执行 docker run -it xianhu/ce…

阿里云4核16G服务器可以用来做什么?

阿里云4核16G服务器可以用来做什么&#xff1f;可用来搭建游戏服务器&#xff0c;阿里云4核16G服务器10M带宽30元1个月、90元3个月&#xff0c;优惠活动 aliyunfuwuqi.com/go/youhui 阿里云4核16G服务器可以用来做什么&#xff1f;除了搭建游戏服务器&#xff0c;还可以用来哪…

DVWA靶场的下载与搭建

目录 什么是靶场 DVWA靶场下载 下载地址 安装 什么是靶场 靶场就是人为提供的带有安全漏洞的服务&#xff0c;每一个学习者都可以在本地快速搭建来实操&#xff0c;回溯漏洞的发生原理以及操作方式。DVWA靶场呢就是一个可以通过浏览器访问的拥有可视化页面的web靶场。 DVW…

PostgreSQL入门到实战-第二十一弹

PostgreSQL入门到实战 PostgreSQL中表连接操作(五)官网地址PostgreSQL概述PostgreSQL中RIGHT JOIN命令理论PostgreSQL中RIGHT JOIN命令实战更新计划 PostgreSQL中表连接操作(五) 使用PostgreSQL RIGHT JOIN连接两个表&#xff0c;并从右表返回行 官网地址 声明: 由于操作系统…

vue3实现时钟效果

鼬鼬鼬鼬鼬被提需求了&#xff01;&#xff01;&#xff01; 产品&#xff1a;你学什么的&#xff1f; 我&#xff1a;跟CV有点关系 产品&#xff1a;control C加control V是吧 我&#xff1a;对对对 效果 时间实时变化&#xff1a; 页面部分 <template><div clas…

性能分析-数据库(安装、索引、sql、执行过程)与磁盘知识(读、写、同时读写、内存速度测试)

数据库 数据库&#xff0c;其实是数据库管理系统dbms。 数据库管理系统&#xff0c; 常见&#xff1a; 关系型数据库&#xff1a; mysql、pg、 库的表&#xff0c;表与表之间有关联关系&#xff1b; 表二维表统一标准的SQL&#xff08;不局限于CRUD&#xff09;非关系型数据…

【40分钟速成智能风控10】风控大数据体系2

目录 ​编辑 特征工程方法 统计量 离散化 时间周期趋势 交叉项 隐性特征 用户画像 特征工程方法 在模型圈内有这么一句俗话&#xff0c;“特征决定了模型的上限&#xff0c;而算法只是逼近这个上限”&#xff0c;由此可见特征工程在风控建模中的重要程度。特征工程的本…

调用R语言并提供Rest接口

文章目录 一、安装R语言环境二、qdiabetes三、安装Python环境四、提供Rest接口 一、安装R语言环境 安装 sudo apt-get update sudo apt-get install r-base/home/rscript/script.R # script.R cat("Hello, World!\n")测试 Rscript /home/rscript/script.R二、qdi…

如何开辟动态二维数组(C语言)

1. 开辟动态二维数组 C语言标准库中并没有可以直接开辟动态二维数组的函数&#xff0c;但我们可以通过动态一维数组来模拟动态二维数组。 二维数组其实可以看作是一个存着"DataType []"类型数据的一维数组&#xff0c;也就是存放着一维数组地址的一维数组。 所以&…

基于centos7安装docker+k8s+KubeSphere

实验环境&#xff1a;&#xff08;每个服务器推荐内存为8G&#xff09; 服务器 ip地址 主机名 centos7 192.168.80.1…

面试: 单例模式

目录 一、饿汉单例&#xff08;实现Serializable&#xff09; 1、破坏单例的三种情况 &#xff08;1&#xff09;反射破坏单例 &#xff08;2&#xff09;反序列化破坏单例 &#xff08;3&#xff09;Unsafe破坏单例 2、饿汉单例&#xff08;利用枚举实现&#xff09; 二…

44.基于SpringBoot + Vue实现的前后端分离-汽车租赁管理系统(项目 + 论文PPT)

项目介绍 本站是一个B/S模式系统&#xff0c;采用SpringBoot Vue框架&#xff0c;MYSQL数据库设计开发&#xff0c;充分保证系统的稳定性。系统具有界面清晰、操作简单&#xff0c;功能齐全的特点&#xff0c;使得基于SpringBoot Vue技术的汽车租赁管理系统设计与实现管理工作…

吴恩达机器学习:均值聚类法(K-means Clustering)

在本练习中&#xff0c;您将实现K-means算法并将其用于图像压缩。 您将从一个样本数据集开始&#xff0c;该数据集将帮助您直观地了解K-means算法的工作原理。之后&#xff0c;您将使用K-means算法进行图像压缩&#xff0c;将图像中出现的颜色数量减少到该图像中最常见的颜色。…