黑马axios案例之地区查询

这篇具有很好参考价值的文章主要介绍了黑马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].value
        let cname = inp[1].value
        axios({
            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("")
            // 获取ul
            document.querySelector("ul").innerHTML = list
        })
    }
</script>

</html>

黑马axios案例之地区查询,javascript,开发语言,ecmascript

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!文章来源地址https://www.toymoban.com/news/detail-817204.html

到了这里,关于黑马axios案例之地区查询的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 3分钟搞懂:JavaScript 和 ECMAScript

    ECMAScript 是 JavaScript 语言的 国际标准 ,JavaScript 是 ECMAScript 的 一种实现 (Adobe ActionScript 和 JScript 同样实现了 ECMAScript)。 ECMAScript 是欧洲计算机制造商协会 ECMA(European Computer Manufacturers Association)发布的浏览器脚本语言标准。它是 262 号标准文件,又叫 ECMA-262。 ECMAScript 定义

    2023年04月22日
    浏览(47)
  • 前端学习笔记:JavaScript基础语法(ECMAScript)

    此博客参考b站:【黑马程序员前端JavaScript入门到精通全套视频教程,javascript核心进阶ES6语法、API、js高级等基础知识和实战教程】https://www.bilibili.com/video/BV1Y84y1L7Nn?p=76vd_source=06e5549bf018e111f4275c259292d0da 这份笔记适用于已经学过一门编程语言(最好是C语言)的同学,如果你没有

    2024年02月16日
    浏览(47)
  • 黑马程序员JavaWeb开发|案例:tlias智能学习辅助系统(6)解散部门

      指路(1)(2)(3)(4)(5)👇 黑马程序员JavaWeb开发|案例:tlias智能学习辅助系统(1)准备工作、部门管理_tlias智能学习辅助系统的需求分析-CSDN博客 https://blog.csdn.net/YOYU_/article/details/135476566 黑马程序员JavaWeb开发|案例:tlias智能学习辅助系统(2)员工管理|分页查询、

    2024年01月19日
    浏览(53)
  • 刮刮乐--课后程序(Python程序开发案例教程-黑马程序员编著-第4章-课后作业)

    刮刮乐的玩法多种多样,彩民只要刮去刮刮乐上的银色油墨即可查看是否中奖。每张刮刮乐都有多个兑奖区,每个兑奖区对应着不同的获奖信息,包括“一等奖”、“二等奖”、“三等奖”和“谢谢惠顾”。假设现在有一张刮刮乐,该卡片上面共有8个刮奖区,每个刮奖区对应

    2024年02月06日
    浏览(99)
  • 井字棋--课后程序(Python程序开发案例教程-黑马程序员编著-第7章-课后作业)

    井字棋是一种在3 * 3格子上进行的连珠游戏,又称井字游戏。井字棋的游戏有两名玩家,其中一个玩家画圈,另一个玩家画叉,轮流在3 * 3格子上画上自己的符号,最先在横向、纵向、或斜线方向连成一条线的人为胜利方。如图1所示为画圈的一方为胜利者。   图1 井字棋 本实

    2024年02月04日
    浏览(55)
  • 深入理解 ECMAScript modules:提升你的 JavaScript 技能(六)

    🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_ CSDN 博客专家、23年度博客之星前端领域TOP1 🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你

    2024年02月21日
    浏览(52)
  • 深入理解 ECMAScript modules:提升你的 JavaScript 技能(一)

    🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_ CSDN 博客专家、23年度博客之星前端领域TOP1 🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你

    2024年02月20日
    浏览(44)
  • 逢七拍手游戏--课后程序(Python程序开发案例教程-黑马程序员编著-第3章-课后作业)

    逢7拍手游戏的规则是:从1开始顺序数数,数到有7或者包含7的倍数的时候拍手。本实例要求编写程序,模拟实现逢七拍手游戏,输出100以内需要拍手的数字。 掌握for循环与range()函数的使用 掌握字符串中find()方法的使用 判断一个数字是否与7相关,可分为两种情况: 1.是否为

    2024年02月06日
    浏览(87)
  • 手机通讯录--课后程序(Python程序开发案例教程-黑马程序员编著-第5章-课后作业)

    通讯录是记录了联系人姓名和联系方式的名录,手机通讯录是最常见的通讯录之一,人们可以在通讯录中通过姓名查看相关联系人的联系方式、邮箱、地址等信息,也可以在其中新增联系人,或修改、删除联系人信息。下面是一个常见通讯录的功能菜单,如图1所示。   图1

    2024年02月01日
    浏览(59)
  • 银行管理系统--课后程序(Python程序开发案例教程-黑马程序员编著-第7章-课后作业)

    从早期的钱庄到现如今的银行,金融行业在不断地变革;随着科技的发展、计算机的普及,计算机技术在金融行业得到了广泛的应用。银行管理系统是一个集开户、查询、取款、存款、转账、锁定、解锁、退出等一系列的功能的管理系统,该系统中各功能的介绍如下。 开户功

    2024年02月04日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包