AJAX(1)——axios库的使用

news2024/11/20 13:19:08

什么是AJAX?

AJAX是异步的JavaScript和XML。简单来说,就是使用XMLHttpRequest对象与服务器通信。它可以使用JSON,XML,HTML和text文本等格式发送和接收数据。AJAX最吸引人的就是它异步的特性,也就是说它可以在不重新刷新页面的情况下与服务器通信,交换数据或更新页面

概念:AJAX是浏览器与服务器进行数据通信的技术

怎样使用AJAX?

先使用axios库,与服务器进行数据通信 

axios使用

语法:

  1. 引入axios.js : https://cdn.unpkg.net/ npm/ axios/ dist/ axios.min.js(jsdelivr cdn)不能用
  2. 使用axios函数

传入配置对象,再用.then回调函数接收结果,并做后续处理

axios({ 

  url:'目标资源地址'

}).then((result)=>{

})


 使用axios库将省份列表插入到页面

<body>
  <script src="https://cdn.unpkg.net/npm/axios/dist/axios.min.js">
  </script>
  <script>
    axios({
      url: 'http://hmajax.itheima.net/api/province'
    }).then(result => {
      console.log(result)
    })
  </script>
</body>

 要从result对象获取数据

console.log(result.data.list)

全部代码:

<body>
  <p class="ok"></p>
  <script src="https://cdn.unpkg.net/npm/axios/dist/axios.min.js">
  </script>
  <script>
    axios({
      url: 'http://hmajax.itheima.net/api/province'
    }).then(result => {
      console.log(result)
      console.log(result.data.list)
      console.log(result.data.list.join('<br>'));//拼接字符串
      //插入页面
      document.querySelector('.ok').innerHTML = result.data.list.join('<br>')
    })
  </script>
</body>

 

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

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

相关文章

免费【2024】springboot 宠物救助管理系统的设计与实现

博主介绍&#xff1a;✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌ 技术范围&#xff1a;SpringBoot、Vue、SSM、HTML、Jsp、PHP、Nodejs、Python、爬虫、数据可视化…

成为git砖家(4): git status 命令简介

1. untracked 和 tracked 状态 Remember that each file in your working directory can be in one of two states: tracked or untracked. Tracked files are files that were in the last snapshot, as well as any newly staged files; they can be unmodified, modified, o…

Feign自定义调用第三方接口并实现负载均衡

Feign自定义调用第三方接口并实现负载均衡 Feign简介&#xff1a; Feign 是一个声明式的、模板化的HTTP客户端&#xff0c;用于简化HTTP客户端的开发。它是Spring Cloud Netflix微服务套件中的一部分&#xff0c;使得编写Java HTTP客户端变得更加容易。它的原理主要是代理模式…

Rust |了解+ 环境配置(rust+vscode)

1 了解rust 1️⃣0️⃣0️⃣秒了解Rust_哔哩哔哩_bilibili 2 安装rust 前提安装过vs&#xff0c;有c环境 1.下载 根据自己的系统下载对应的版本&#xff1a;安装地址 查看自己版本&#xff1a; 右键 此电脑 &#xff1b;点击 属性 &#xff1b;查看 系统类型 点击 下载RU…

智慧城管解决方案

1. 项目整体概述 智慧城管项目面临历史发展机遇&#xff0c;十九大提出以人为核心保障民生&#xff0c;推进新型城镇化。市民对政府服务有新诉求&#xff0c;同时云计算、物联网、移动互联网等技术迅速发展。 2. 传统城管业务模式问题 传统城管业务模式存在问题&#xff0c;…

树莓派学习记录

一&#xff0c;型号 第一代Raspberry Pi 1 Model B 第一代升级版 Raspberry Pi 1 B 第二代 Rasberry Pi 2 Model B 第三代及升级版 Rasberry Pi 3 Model B/B 第四代 Rasberry Pi 4 Model B Model A版 比B版便宜 Zero 版 售价更便宜 总结 二&#xff0c;树莓派接口 如下图…

Hello 算法:动画图解、一键运行的数据结构与算法教程

Hello 算法 《Hello 算法》是一份开源、免费的数据结构与算法入门教程&#xff0c;特别适合新手。全书采用动画图解&#xff0c;内容清晰易懂&#xff0c;学习曲线平滑&#xff0c;引导初学者探索数据结构与算法的知识地图。源代码可以一键运行&#xff0c;帮助读者通过练习提…

【教学类-70-01】20240728一个茶壶两个茶杯(果茶)

‘ 背景需求&#xff1a; 用通义万相下载简笔画茶壶、茶杯 茶杯&#xff0c;简单笔画&#xff0c;卡通&#xff0c;黑白&#xff0c;未着色&#xff0c;幼儿插图&#xff0c;线条画&#xff0c;没有背景&#xff0c;没有颜色&#xff0c;黑白漫画线条艺术:&#xff0c;空背景…

JAVAWeb实战(后端篇)

因为前后端代码内容过多&#xff0c;这篇只写后端的代码&#xff0c;前端的在另一篇写 项目实战一&#xff1a; 1.创建数据库,表等数据 创建数据库 create database schedule_system 创建表&#xff0c;并添加内容 SET NAMES utf8mb4; SET FOREIGN_KEY_CHECKS 0;-- ---------…

十一、Dockerfile解析

目录 一、Dockerfile简介 二、dockerfile的构建的三个步骤 三、Dockerfile的构建过程 1、DockerFile内容的基础知识 2、Docker执行Dockerfile的大致流程 四、dockerfile常用的保留字 1、FROM 2、MAINTAINER 3、RUN 4、EXPOSE 5、WORKDIR 6、USER 7、ENV 8、VOLUME …

VScode使用Github Copilot插件时出现read ECONNREST问题的解决方法

文章目录 read ECONNREST查看是否仍是 Copilot 会员查看控制台输出网络连接问题浏览器设置问题笔者的话 read ECONNREST 最近使用 Copilot 时一直出现 read ECONNREST 问题&#xff0c;这个表示连接被对方重置了&#xff0c;就是说在读取数据时连接被关闭。 我首先怀疑是不是…

QT常用的控件

QT常用控件 一.控件概述二.QWidget 核心属性2.1 核心属性概览2.2 enabled代码示例&#xff1a;使用代码创建一个禁用状态的按钮代码示例: 通过按钮2 切换按钮1 的禁用状态. 2.3 geometry代码示例: 控制按钮的位置代码示例: ⼀个随机按钮程序代码示例: 感受 geometry 和frameGeo…

Python | TypeError: ‘NoneType’ object is not iterable

Python | TypeError: ‘NoneType’ object is not iterable 在Python编程中&#xff0c;TypeError: NoneType object is not iterable 是一个常见的错误&#xff0c;通常表明你尝试对一个值为 None 的对象进行迭代操作&#xff0c;而 None 类型的对象是不可迭代的。本文将深入…

python count返回什么

描述 count() 方法用于统计字符串中某个子字符串出现的次数&#xff0c;可选参数为开始搜索与结束搜索的位置索引。 语法 count() 方法语法&#xff1a; S.count(sub[,start0[,endlen(S)]]) 参数 sub -- 搜索的子字符串。 S -- 父字符串。 start -- 可选参数&#xff0c;…

Windows11和Win10如何彻底永久关闭Windows defender

Windows11和Win10如何彻底永久关闭Windows defender 亲测简单快捷有效关闭病毒和威胁防护。 使用关闭windows defender工具。 随时可以重新开启病毒和威胁防护。

【Spring Boot】Spring 的安全框架:Spring Security

Spring 的安全框架&#xff1a;Spring Security 1.Spring Security 初识1.1 核心概念1.2 认证和授权1.2.1 验证&#xff08;authentication&#xff09;1.2.2 授权&#xff08;authorization&#xff09; 1.3 模块 2.核心类2.1 Securitycontext2.2 SecurityContextHolder2.2.1 …

刷题心得之位运算技巧 gcd 和 lcm

位运算 gcd 和 lcm 位运算技巧遍历 n 的所有子集, 不包括空集遍历 n 的所有子集, 包括空集提取出 n 二进制中第一次出现的1消除 n 二进制中第一次出现的1判断 n 是否是 2 的幂次方 gcd [最大公约数]lcm [最小公倍数] 位运算技巧 遍历 n 的所有子集, 不包括空集 #include <…

52.TFT_LCD液晶屏字符显示

&#xff08;1&#xff09;实验目标&#xff1a;在5寸显示屏&#xff08;800 * 480 60&#xff09;中央显示汉字&#xff08;黄色&#xff09;&#xff0c;且背景颜色为青色。 &#xff08;2&#xff09;代码编写&#xff1a; tft_ctrl模块&#xff1a; module tft_ctrl(inp…

电子电气架构---域控制器的软硬件趋势

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明自己,无利益不试图说服别人,是精神上的节…

TiDB-从0到1-sync-diff-inspector数据校验工具

TiDB从0到1系列 TiDB-从0到1-体系结构TiDB-从0到1-分布式存储TiDB-从0到1-分布式事务TiDB-从0到1-MVCCTiDB-从0到1-部署篇TiDB-从0到1-配置篇TiDB-从0到1-集群扩缩容TiDB-从0到1-数据导出导入TiDB-从0到1-BR工具 一、sync-diff-inspector工具 sync-diff-inspector是TiDB原生…