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

Ajax入门

news 2025/11/25 20:37:09

文章目录

  • 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

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2025/11/25 17:39:20

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2025/9/11 12:54:42

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

编程新知 2025/11/12 4:14:22

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/10/8 5:48:25

高防服务器能够抵御哪些网络攻击呢？

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

编程新知 2025/9/3 19:14:38

JS设计模式(4)：观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

编程新知 2025/9/1 6:48:07

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

编程新知 2025/10/4 6:30:56

深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

编程新知 2025/11/17 6:24:45

Rust 开发环境搭建

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行&#xff1a; rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu ​ 2、Hello World fn main() { println…...

编程新知 2025/11/16 22:31:25

抽象类和接口（全）

一、抽象类 1.概念&#xff1a;如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象&#xff0c;这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法&#xff0c;包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中&#xff0c;⼀个类如果被 abs…...

编程新知 2025/11/17 8:04:50