黑马axios案例之地区查询

查询某个省内某个城市的所有地区 接口:http://hmajax.itheima.net/api/area
参数名:
pname:省份名字或直辖市名字,比如北京、福建省、辽宁省…
cname:城市名字,比如北京市、厦门市、大连市…

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head><body>省:<input type="text">市:<input type="text"><button>查询</button><ul></ul>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
<script>// http://hmajax.itheima.net/api/area// 给按钮设置点击事件document.querySelector("button").onclick = function () {// 获取省市的input表单值let inp = document.querySelectorAll("input")let pname = inp[0].valuelet cname = inp[1].valueaxios({url: "http://hmajax.itheima.net/api/area",params: {// 传入省市pname,cname}}).then(result => {// console.log(result);// 处理一下获取到的数据let list = result.data.list.map(item => `<li>${item}</li>`).join("")// 获取uldocument.querySelector("ul").innerHTML = list})}
</script></html>

请添加图片描述

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

transdata笔记:手机数据处理

1 mobile_stay_duration 每个停留点白天和夜间的持续时间 transbigdata.mobile_stay_duration(staydata, col[stime, etime], start_hour8, end_hour20) 1.1 主要参数 staydata停留数据&#xff08;每一行是一条数据&#xff09;col 列名&#xff0c;顺序为[‘starttime’,…

仓储管理系统——软件工程报告(总体设计)③

总体设计 一、需求规定 软件工程仓库存储管理系统的需求规定是确保系统能够满足用户期望、提高工作效率、确保数据安全性和系统可维护性的基石。其涵盖了功能性、性能、数据管理、用户界面和系统可维护性等多个方面。通过严格的验收标准&#xff0c;可以确保系统在实际应用中…

4小时精通MyBatisPlus框架

目录 1.介绍 2.快速入门 2.1.环境准备 2.2.快速开始 2.2.1引入依赖 2.2.2.定义Mapper ​编辑 2.2.3.测试 2.3.常见注解 ​编辑 2.3.1.TableName 2.3.2.TableId 2.3.3.TableField 2.4.常见配置 3.核心功能 3.1.条件构造器 3.1.1.QueryWrapper 3.1.2.UpdateWra…

R语言rvest爬虫如何设置ip代理?

前言 在R语言中使用rvest进行网络爬虫时&#xff0c;可以使用代理服务器来隐藏真实IP地址。有一些R包可以帮助爬虫中设置代理&#xff0c;其中一个常用的包是httr。以下是一个简单的例子&#xff0c;演示如何在rvest中设置IP代理 教程 一、获取代理IP并提取 二、详情设置 l…

【蓝桥杯--图论】Dijkstra、Ballman-Ford、Spfa、Floyd

今日语录&#xff1a;每一次挑战都是一次成长的机会 文章目录 朴素DIjkstra堆优化的DijkstraBallman-FordFloydSpfa(求最短路)Spfa&#xff08;求是否含有负权&#xff09; 如上所示即为做题时应对的方法 朴素DIjkstra 引用与稠密图&#xff0c;即m<n^2 #include<iostrea…

JavaEE 网络原理

JavaEE 网络原理 文章目录 JavaEE 网络原理1. 网络互连1.1 局域网LAN1.2 广域网WAN 2. 网络通信基础2.1 IP地址2.2 端口号 3. 网络协议3.1 概念3.2 五元组3.3 协议分层3.4 TCP/IP 五层模型3.5 封装和分用 1. 网络互连 随着时代的发展&#xff0c;需要多个计算机协同工作来完成…

安全通信网络

1.网络架构 1&#xff09;应保证网络设备的业务处理能力满足业务高峰期需要。 设备CPU和内存使用率的峰值不大于设备处理能力的70%。 在有监控环境的条件下&#xff0c;应通过监控平台查看主要设备在业务高峰期的资源&#xff08;CPU、内存等&#xff09;使用 情况&#xff…

NodeJs 第二十三章 客户端缓存

缓存的基本原理 在一个C/S结构中&#xff0c;最基本的缓存分为两种&#xff1a; 客户端缓存服务器缓存 本文仅讨论客户端缓存 所谓客户端缓存&#xff0c;顾名思义&#xff0c;是将某一次的响应结果保存在客户端&#xff08;比如浏览器&#xff09;中&#xff0c;而后续的请…

初识人工智能,一文读懂机器学习之逻辑回归知识文集(2)

&#x1f3c6;作者简介&#xff0c;普修罗双战士&#xff0c;一直追求不断学习和成长&#xff0c;在技术的道路上持续探索和实践。 &#x1f3c6;多年互联网行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f389;欢迎 &#x1f44d;点赞✍评论…

【分布式技术】注册中心zookeeper

目录 一、ZooKeeper是什么 二、ZooKeeper的工作机制 三、ZooKeeper特点 四、ZooKeeper数据结构 五、ZooKeeper应用场景 ●统一命名服务 ●统一配置管理 ●统一集群管理 ●服务器动态上下线 ●软负载均衡 六、ZooKeeper的选举机制 七、实操部署ZooKeeper集群 步骤一…

【江科大】STM32:TIM输入捕获(理论部分)

文章目录 IC&#xff08;Input Capture&#xff09;输入捕获PWM频率 知识点补充1. 滤波器的工作原理&#xff1a;2. 边沿检测器&#xff1a;自动化清零CNT输入捕获的基本结构PWMI基本结构滤波器和分频器的区别误差分析pwm.cmain.cIC.c PWM模式测频率和占空比 IC&#xff08;Inp…

vue3-组件基础

什么是组件 组件允许我们将 UI 划分为独立的、可重用的部分&#xff0c;并且可以对每个部分进行处理。在实际应用中&#xff0c;组件常常被组织成层层嵌套的树状结构。 定义一个组件 我们一般会将 Vue 组件定义在一个单独的 .vue 文件中&#xff0c;这被叫做单文件组件 (简称…