AJAX(1)——axios库的使用

什么是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.mzph.cn/diannao/51289.shtml

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

相关文章

昇思25天学习打卡营第25天|LLM应用-基于MindNLP+MusicGen生成自己的个性化音乐

打卡 目录 打卡 应用任务简介 生成音乐 预训练权重模型下载 无提示生成 文本提示生成 音频提示生成 生成配置 应用任务简介 MusicGen 来自 Meta AI 的 Jade Copet 等人提出的基于单个语言模型&#xff08;LM&#xff09;的音乐生成模型&#xff0c;能够根据文本描述或…

NFS服务器环境搭建

1、什么是NFS ● 定义&#xff1a; NFS是一种在计算机系统之间共享文件和目录的协议&#xff0c;最初由Sun Microsystems开发&#xff0c;现在已经成为广泛使用的网络文件系统之一。 ● 核心功能&#xff1a; 通过网络&#xff08;特别是TCP/IP网络&#xff09;实现文件共享…

微信小程序配置访问服务器失败所发现的问题及解决方案

目录 事前现象问题1&#xff1a;问题现象&#xff1a;问题分析&#xff1a; 问题2&#xff1a;问题现象&#xff1a;问题分析&#xff1a;解决方案&#xff1a; 事后现象 事前现象 问题1&#xff1a; 问题现象&#xff1a; 在本地调试时&#xff0c;一切顺利&#xff0c;但一…

Flink Doirs Connector 常见问题:Doris目前不支持流读

常见问题 Doris Source 在数据读取完成后&#xff0c;流为什么就结束了&#xff1f; 目前 Doris Source 是有界流&#xff0c;不支持 CDC 方式读取。 问题&#xff1a;对于 Flink Doris DataStream&#xff0c;Flink 想要在 流式读取 Doirs / 实时读 Doris&#xff0c;目前读…

03--KVM虚拟化

前言&#xff1a;这里开始涉及到云计算内容&#xff0c;虚拟化使云计算发展&#xff0c;云计算推动虚拟化进步&#xff0c;两者相辅相成&#xff0c;这一章总结一下kvm虚拟化的解决方案。 1、基础概念 1.1、云计算 以前要完成信息处理, 是需要在一个客观存在的计算机上完成的…

Node.js版本管理工具之NVM

目录 一、NVM介绍二、NVM的下载安装1、NVM下载2、卸载旧版Node.js3、安装 三、NVM配置及使用1、设置nvm镜像源2、安装Node.js3、卸载Node.js4、使用或切换Node.js版本5、设置全局安装路径和缓存路径 四、常用命令技术交流 博主介绍&#xff1a; 计算机科班人&#xff0c;全栈工…

卷积神经网络(一)---原理和结构

在介绍卷积神经网络之前&#xff0c;先提出三个观点&#xff0c;正是这三个观点使得卷积神经网络能够真正起作用。 1. 局部性 对于一张图片而言&#xff0c;需要检测图片中的特征来决定图片的类别&#xff0c;通常情况下这些特征都不是由整张图片决定的&#xff0c;而是由一些…

vscode 环境

这张截图显示的是在VS Code&#xff08;Visual Studio Code&#xff09;中选择Python解释器的界面。不同的Python解释器及其虚拟环境列出了可选项&#xff0c;用户可以根据需要选择合适的解释器来运行Python代码。以下是对截图中信息的详细解释&#xff1a; 解释器选择界面 当…

Chrome浏览器设置暗黑模式 - 护眼模式 - 亮度调节 - DarkReader - 地址栏和书签栏设置为黑色背景

效果图 全黑 浅灰 &#xff08;DarkReader设置开启亮色亮度-25&#xff09; 全白 前言 主要分两部分需要操作&#xff0c; 1&#xff09;地址栏和书签栏 》 需要修改浏览器的外观模式 2&#xff09;页面主体 》 需要安装darkreader插件进行设置 步骤 1&#xff09;地址栏和…

AOP面向切面编程和log4j的使用(Java版)

什么是面向切面编程 在传统的面向对象编程中&#xff0c;程序的功能被模块化成各个类和方法&#xff0c;这些类和方法分别处理特定的功能。然而&#xff0c;有些功能可能涉及到多个类、多个方法&#xff0c;例如日志记录、事务管理、性能监控等&#xff0c;这些功能可能在不同…

橙单后端项目下载编译遇到的问题与解决

今天下载orange-admin项目&#xff0c;不过下载下来运行出现一些问题。 1、涉及到XMLStreamException的几个类都出现下面的错误 The package javax.xml.stream is accessible from more than one module: <unnamed>, java.xml ctrl-shift-t 可以找到这个引入是哪些包里…

AcWing803. 区间合并

#include<climits>的作用是方便我直接使用INT_MIN,下面这个代码是二刷写的 思路是先根据 [ L , R ] i [L,R]_i [L,R]i​的L先排序&#xff0c;然后遍历vector进行区间合并。 #include<iostream> #include<vector> #include<algorithm> #include<cl…

在window将Redis注册为服务

将redis注册为系统服务&#xff0c;开启自启动 安装服务 默认注册完之后会自动启动&#xff0c;在window中的服务看一下&#xff0c;如果启动类型为自动&#xff0c;状态是自动运行则启动完成。如果是手动&#xff0c;需要右键属性调整为自动&#xff0c;在点击启动&#xff0c…

【React】详解组件通信:从基础到进阶的全面指南

文章目录 一、父组件向子组件传递数据1. 基本概念2. 示例代码3. 详解定义子组件 Son定义父组件 App导出父组件 App数据流props 的内容 二、子组件向父组件传递数据1. 基本概念2. 示例代码3. 详解引入React库和useState钩子定义子组件 Son定义父组件 App导出父组件 App数据流 三…

C++11新特性——智能指针——参考bibi《 原子之音》的视频以及ChatGpt

智能指针 一、内存泄露1.1 内存泄露常见原因1.2 如何避免内存泄露 二、实例Demo2.1 文件结构2.2 Dog.h2.3 Dog.cpp2.3 mian.cpp 三、独占式智能指针:unique _ptr3.1 创建方式3.1.1 ⭐从原始(裸)指针转换&#xff1a;3.1.2 ⭐⭐使用 new 关键字直接创建&#xff1a;3.1.3 ⭐⭐⭐…

Idea中连接MS SQL Server报错:驱动程序无法通过使用安全套接字层(SSL)加密与 SQL Server 建立安全连接

一、错误重现 报错如下&#xff1a; [08S01] 驱动程序无法通过使用安全套接字层(SSL)加密与 SQL Server 建立安全连接。错误:“PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to request…

leetcode日记(59)简化路径

&#xff08;小杯文字描述…看了好一会才看懂题目要求&#xff09;题目是标准化路径&#xff0c;就是将多个‘/’优化为一个、将最后一个‘/’去掉、将‘/../’和‘/./’去掉&#xff0c;将原路径转化为实际想表达的最终路径。 有点像单纸带图灵机&#xff0c;需要依次遍历字母…

Windows系统安全加固方案:快速上手系统加固指南 (下)

这里写目录标题 一、概述二、IP协议安全配置启用SYN攻击保护 三、文件权限3.1 关闭默认共享3.2 查看共享文件夹权限3.3 删除默认共享 四、服务安全4.1禁用TCP/IP 上的NetBIOS4.2 ### 禁用不必要的服务 五、安全选项5.1启动安全选项5.2禁用未登录前关机 六、其他安全配置**6.1防…

《JavaEE》----2.<多线程的简介创建Thread类>

前言&#xff1a; 大家好&#xff0c;我目前在学习java。我准备利用这个暑假&#xff0c;来复习之前学过的内容&#xff0c;并整理好之前写过的博客进行发布。如果博客中有错误或者没有读懂的地方。热烈欢迎大家在评论区进行讨论&#xff01;&#xff01;&#xff01; 喜欢我文…

【深度学习】“复杂场景下基于深度学习的卷积神经网络在鸟类多类别识别中的模型设计与性能优化研究“(中)

【深度学习】“复杂场景下基于深度学习的卷积神经网络在鸟类多类别识别中的模型设计与性能优化研究”(中) 大家好 我是寸铁&#x1f44a; 【深度学习】“复杂场景下基于深度学习的卷积神经网络在鸟类多类别识别中的模型设计与性能优化研究”(中)✨ 喜欢的小伙伴可以点点关注 &a…