当前位置： 首页 > news >正文

Ajax入门

news 2025/6/27 0:20:49

文章目录

  • axios体验
  • axios-查询参数
  • 常用请求方法
    • 数据提交
  • axios错误处理

axios体验

  • 引入axios库

  • 使用axios语法

    axios({url: '目标资源地址'
}).then((result)=>{// 对服务器返回的数据做后续处理
})

  • 完整实例

    <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX概念和axios使用</title>
</head><body>
<!--axios库地址：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js省份数据地址：http://hmajax.itheima.net/api/province目标: 使用axios库, 获取省份列表数据, 展示到页面上1. 引入axios库
-->
<p class="my-p"></p>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>// 2. 使用axios函数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('.my-p').innerHTML= result.data.list.join('<br>')})
</script>
</body>
</html>

  • 运行结果
    在这里插入图片描述

axios-查询参数

  • 语法：使用axios提供的params选项
    axios({url: '目标资源地址'，params:{参数名:值}
}).then((result)=>{// 对服务器返回的数据做后续处理
})
  • 注意：axios在运行时把参数名和值，会拼接到url ?参数名=值

  • demo

    <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX查询参数</title>
</head><body>
<!--axios库地址：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js省份数据地址：http://hmajax.itheima.net/api/city目标: 使用axios库, 获取省份列表数据, 展示到页面上1. 引入axios库
-->
<p class="my-p"></p>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>// 2. 使用axios函数axios({url:'http://hmajax.itheima.net/api/city',// 查询参数params:{pname:'贵州省'}}).then((result)=>{console.log(result.data.list)document.querySelector('.my-p').innerHTML=result.data.list.join('<br>')})
</script>
</body>
</html>

  • 运行结果
    在这里插入图片描述

常用请求方法

  • 请求方法：对服务器资源，要执行的操作
    请求方法操作
    GET获取数据
    POST提交数据
    PUT修改数据（全部）
    DELETE删除数据
    PATCH修改数据（部分）

数据提交

axios请求配置

  • url：请求的URL地址
  • method：请求的方法，GET可以省略不写（不区分大小写）
  • data：提交的数据
    axios({url: '目标资源地址',method:'请求方法',data:{参数名：值}
}).then((result)=>{// 对服务器返回的数据做后续处理
})

axios错误处理

语法：在then方法的后面，通过点语法调用catch方法，传入回调函数并定义形参

axios({// 请求选项
}).then(result=>{// 处理数据
}).catch(error=>{// 处理错误
})

相关文章：

Ajax入门

文章目录 axios体验axios-查询参数常用请求方法数据提交 axios错误处理 axios体验 引入axios库 使用axios语法 axios({url: 目标资源地址 }).then((result)>{// 对服务器返回的数据做后续处理 })完整实例 <!DOCTYPE html> <html lang"en"><head&g…...

编程日记 2023/8/12 22:16:48

MapReduce基础原理、MR与MPP区别

MapReduce概述 MapReduce&#xff08;MR&#xff09;本质上是一种用于数据处理的编程模型&#xff1b;MapReduce用于海量数据的计算&#xff0c;HDFS用于海量数据的存储&#xff08;Hadoop Distributed File System&#xff0c;Hadoop分布式文件系统&#xff09;。Hadoop MapR…...

编程日记 2023/8/12 22:15:46

位运算符让人反胃

A60 B13 二进制下 A00111100 B00001101 &&#xff08;同1为1&#xff09; A00111100 & B00001101 X00001100 X12 |&#xff08;有1为1&#xff09; A00111100 | B00001101 X00111101 X61 ^&#xff08;不同为1&#xff09; A00111100 ^ B00001101 X00110001 X49 ~&…...

编程日记 2023/8/12 22:14:44

selenium环境搭建

文章目录 1、下载谷歌浏览器2、下载谷歌驱动 1、下载谷歌浏览器 浏览器下载完成后&#xff0c;在任务管理器中禁止浏览器的自动更新。因为驱动版本必须和浏览器一致&#xff0c;如果浏览器更新了&#xff0c;驱动就用不起了。 2、下载谷歌驱动 谷歌驱动需要和谷歌浏览器版本…...

编程日记 2023/8/12 22:13:43

Python-OpenCV中的图像处理-霍夫变换

Python-OpenCV中的图像处理-霍夫变换 霍夫变换霍夫直线变换霍夫圆环变换 霍夫变换 霍夫(Hough)变换在检测各种形状的技术中非常流行&#xff0c;如果要检测的形状可以用数学表达式描述&#xff0c;就可以是使用霍夫变换检测它。即使要检测的形状存在一点破坏或者扭曲也是可以使…...

编程日记 2023/8/12 22:12:42

最强自动化测试框架Playwright（10）- 截图

截图 捕获屏幕截图并将其保存到文件中&#xff1a; page.screenshot(path"screenshot.png")可将页面截图保存为screen.png import osfrom playwright.sync_api import Playwright, expect, sync_playwrightdef run(playwright: Playwright) -> None:browser p…...

编程日记 2023/8/12 22:11:40

SQL常见命令语句

1.连接数据库 mysql (-h IP) -u root -p 密码2.查看数据库 show databases3.使用数据库 use db_name4.查看表 show tables [from db_name]5.查看表结构 desc tb_name6.创建、删除、选择数据库 create database db_namedrop database db_nameuse db_name7.数据类型 参考链…...

编程日记 2023/8/12 22:10:37

Android Framework解析——WMS原理

作者&#xff1a;bobby_developer 1. WMS原理&#xff1a;WMS角色与实例化过程 window:它是一个抽象类&#xff0c;具体实现类为 PhoneWindow &#xff0c;它对 View 进行管理。Window是View的容器&#xff0c;View是Window的具体表现内容&#xff1b; windowManager:是一个接…...

编程日记 2023/8/12 22:09:34

python编辑器安装与配置,python用哪个编辑器好用

大家好&#xff0c;给大家分享一下python编辑器pycharm安装教程&#xff0c;很多人还不知道这一点。下面详细解释一下。现在让我们来看看&#xff01; 哪些python的编程软件值得推荐&#xff1f; 编写python源代码的软件.首推的Pycharm。 PyCharm用于bai一般IDE具备的功能&…...

编程日记 2023/8/12 22:08:33

如何使用ElasticSearch存储和查询数据

1. 引言 在大多数的场景里&#xff0c;存储数据都是用MySQL这类关系型数据库&#xff0c;这类数据库的特点是数据存储安全性和一致性高&#xff0c;可以用于事务操作&#xff0c;但是随着数据量的增加&#xff0c;查询的速度也会随之降低&#xff0c;并且其扩展能力有限&#x…...

编程日记 2023/8/12 22:07:32

谈谈对Spring MVC的理解

问题分析&#xff1a; SpringMVC 是一种基于 Java 语言开发&#xff0c;实现了 Web MVC 设计模式&#xff0c;请求驱动类型 的轻量级 Web 框架。 SpringMVC采用了 MVC 架构模式的思想&#xff0c;通过把 Model&#xff0c;View&#xff0c;Controller 分离&#xff0c;将 Web 层…...

编程日记 2023/8/12 22:06:31

Shopify平台Fulfillment业务模块升级

上图是销售订单、发货单与配送之间的关系图&#xff0c;销售订单可以创建多个发货单&#xff0c;多个发货单(不同销售订单)可以合并在一个配送订单进行发货 接口请求错误记录: 1. The api_client does not have the required permission(s). 2. Required parameter missing or…...

编程日记 2023/8/12 22:05:29

使用 PyTorch 逐步检测单个对象

一、说明 在对象检测任务中&#xff0c;我们希望找到图像中对象的位置。我们可以搜索一种类型的对象&#xff08;单对象检测&#xff0c;如本教程所示&#xff09;或多个对象&#xff08;多对象检测&#xff09;。通常&#xff0c;我们使用边界框定义对象的位置。有几种方法可以…...

编程日记 2023/8/12 22:04:28

Node.js |（二）Node.js API：fs模块 | 尚硅谷2023版Node.js零基础视频教程

学习视频&#xff1a;尚硅谷2023版Node.js零基础视频教程&#xff0c;nodejs新手到高手 文章目录 &#x1f4da;文件写入&#x1f407;writeFile 异步写入&#x1f407;writeFileSync 同步写入&#x1f407;appendFile / appendFileSync 追加写入&#x1f407;createWriteStrea…...

编程日记 2023/8/12 22:03:27

Android 13 Hotseat定制化修改——002 hotseat图标数量修改

目录 一.背景 二.实践方案 一.背景 由于需求是需要自定义修改Hotseat&#xff0c;所以此篇文章是记录如何自定义修改hotseat的&#xff0c;应该可以覆盖大部分场景&#xff0c;修改点有修改hotseat布局方向&#xff0c;hotseat图标数量&#xff0c;hotseat图标大小&#xff0…...

编程日记 2023/8/12 22:02:26

Flask实现接口mock，安装及使用教程（一）

1、什么是接口mock 主要是针对单元测试的应用&#xff0c;它可以很方便的解除单元测试中各种依赖&#xff0c;大大的降低了编写单元测试的难度 2、什么是mock server 正常情况下&#xff1a;测试客户端——测试——> 被测系统 ——依赖——>外部服务依赖 在被测系统和…...

编程日记 2023/8/12 22:01:25

分立式BUCK电路原理与制作持续更新

目录 一、分立式BUCK电路总体原理图 二、BUCK电路与LDO的区别 三、BUCK电路为什么要加电感 四、BUCK电路要加续流二极管 五、BUCK电路导通与断开的回路 六、电源公式的中的几个表示方式 1、输入功率用Pin表示 2、输出功率用Po表示 3、电源的效率公式&#xff1a;电源的…...

编程日记 2023/8/12 22:00:24

2023年大数据与计算国际会议 (WBDC 2023)| EI、Scoups检索

会议简介 Brief Introduction 2023年大数据与计算国际会议&#xff08;WBDC 2023&#xff09; 会议时间&#xff1a;2023年11月17 -19日 召开地点&#xff1a;中国西安 大会官网&#xff1a;www.iwbdc.org 2023年大数据与计算国际会议&#xff08;WBDC 2023&#xff09;将围绕“…...

编程日记 2023/8/12 21:59:22

Grafana V10 告警推送 邮件

最近项目建设完成&#xff0c;一个城域网项目&#xff0c;相关zabbix和grafana展示已经完&#xff0c;想了想&#xff0c;不想天天看平台去盯网络监控平台&#xff0c;索性对告警进行分类调整&#xff0c;增加告警的推送&#xff0c;和相关部门的提醒&#xff0c;其他部门看不懂…...

编程日记 2023/8/12 21:58:20

【OpenCV常用函数：视频捕获函数】cv2.VideoCapture

文章目录 1、cv2.VideoCapture() 1、cv2.VideoCapture() 输入视频路径&#xff0c;创建VideoCapture的对象 cv2.VideoCapture(filename) filename: 视频文件的路径视频名扩展名该类的函数有&#xff1a; 1&#xff09;video.isOpened: 检查视频捕获是否成功 2&#xff09;vid…...

编程日记 2023/8/12 21:57:18

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

编程新知 2025/6/26 9:27:52

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

编程新知 2025/6/21 14:29:50

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

编程新知 2025/6/17 3:47:36

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

编程新知 2025/6/20 12:22:50

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

编程新知 2025/6/26 21:35:25

短视频矩阵系统文案创作功能开发实践，定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

编程新知 2025/6/25 22:21:53

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

编程新知 2025/6/15 23:06:39

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...

编程新知 2025/6/26 1:16:57

在 Visual Studio Code 中使用驭码 CodeRider 提升开发效率：以冒泡排序为例

目录 前言1 插件安装与配置1.1 安装驭码 CodeRider1.2 初始配置建议 2 示例代码&#xff1a;冒泡排序3 驭码 CodeRider 功能详解3.1 功能概览3.2 代码解释功能3.3 自动注释生成3.4 逻辑修改功能3.5 单元测试自动生成3.6 代码优化建议 4 驭码的实际应用建议5 常见问题与解决建议…...

编程新知 2025/6/26 2:44:00

Python常用模块：time、os、shutil与flask初探

一、Flask初探 & PyCharm终端配置 目的： 快速搭建小型Web服务器以提供数据。 工具： 第三方Web框架 Flask (需 pip install flask 安装)。 安装 Flask： 建议： 使用 PyCharm 内置的 Terminal (模拟命令行) 进行安装，避免频繁切换。 PyCharm Terminal 配置建议： 打开 Py…...

编程新知 2025/6/16 14:43:58