Ajax入门
文章目录
- 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…...
MapReduce基础原理、MR与MPP区别
MapReduce概述 MapReduce(MR)本质上是一种用于数据处理的编程模型;MapReduce用于海量数据的计算,HDFS用于海量数据的存储(Hadoop Distributed File System,Hadoop分布式文件系统)。Hadoop MapR…...
位运算符让人反胃
A60 B13 二进制下 A00111100 B00001101 &(同1为1) A00111100 & B00001101 X00001100 X12 |(有1为1) A00111100 | B00001101 X00111101 X61 ^(不同为1) A00111100 ^ B00001101 X00110001 X49 ~&…...
selenium环境搭建
文章目录 1、下载谷歌浏览器2、下载谷歌驱动 1、下载谷歌浏览器 浏览器下载完成后,在任务管理器中禁止浏览器的自动更新。因为驱动版本必须和浏览器一致,如果浏览器更新了,驱动就用不起了。 2、下载谷歌驱动 谷歌驱动需要和谷歌浏览器版本…...
Python-OpenCV中的图像处理-霍夫变换
Python-OpenCV中的图像处理-霍夫变换 霍夫变换霍夫直线变换霍夫圆环变换 霍夫变换 霍夫(Hough)变换在检测各种形状的技术中非常流行,如果要检测的形状可以用数学表达式描述,就可以是使用霍夫变换检测它。即使要检测的形状存在一点破坏或者扭曲也是可以使…...
最强自动化测试框架Playwright(10)- 截图
截图 捕获屏幕截图并将其保存到文件中: page.screenshot(path"screenshot.png")可将页面截图保存为screen.png import osfrom playwright.sync_api import Playwright, expect, sync_playwrightdef run(playwright: Playwright) -> None:browser p…...
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.数据类型 参考链…...
Android Framework解析——WMS原理
作者:bobby_developer 1. WMS原理:WMS角色与实例化过程 window:它是一个抽象类,具体实现类为 PhoneWindow ,它对 View 进行管理。Window是View的容器,View是Window的具体表现内容; windowManager:是一个接…...
python编辑器安装与配置,python用哪个编辑器好用
大家好,给大家分享一下python编辑器pycharm安装教程,很多人还不知道这一点。下面详细解释一下。现在让我们来看看! 哪些python的编程软件值得推荐? 编写python源代码的软件.首推的Pycharm。 PyCharm用于bai一般IDE具备的功能&…...
如何使用ElasticSearch存储和查询数据
1. 引言 在大多数的场景里,存储数据都是用MySQL这类关系型数据库,这类数据库的特点是数据存储安全性和一致性高,可以用于事务操作,但是随着数据量的增加,查询的速度也会随之降低,并且其扩展能力有限&#x…...
谈谈对Spring MVC的理解
问题分析: SpringMVC 是一种基于 Java 语言开发,实现了 Web MVC 设计模式,请求驱动类型 的轻量级 Web 框架。 SpringMVC采用了 MVC 架构模式的思想,通过把 Model,View,Controller 分离,将 Web 层…...
Shopify平台Fulfillment业务模块升级
上图是销售订单、发货单与配送之间的关系图,销售订单可以创建多个发货单,多个发货单(不同销售订单)可以合并在一个配送订单进行发货 接口请求错误记录: 1. The api_client does not have the required permission(s). 2. Required parameter missing or…...
使用 PyTorch 逐步检测单个对象
一、说明 在对象检测任务中,我们希望找到图像中对象的位置。我们可以搜索一种类型的对象(单对象检测,如本教程所示)或多个对象(多对象检测)。通常,我们使用边界框定义对象的位置。有几种方法可以…...
Node.js |(二)Node.js API:fs模块 | 尚硅谷2023版Node.js零基础视频教程
学习视频:尚硅谷2023版Node.js零基础视频教程,nodejs新手到高手 文章目录 📚文件写入🐇writeFile 异步写入🐇writeFileSync 同步写入🐇appendFile / appendFileSync 追加写入🐇createWriteStrea…...
Android 13 Hotseat定制化修改——002 hotseat图标数量修改
目录 一.背景 二.实践方案 一.背景 由于需求是需要自定义修改Hotseat,所以此篇文章是记录如何自定义修改hotseat的,应该可以覆盖大部分场景,修改点有修改hotseat布局方向,hotseat图标数量,hotseat图标大小࿰…...
Flask实现接口mock,安装及使用教程(一)
1、什么是接口mock 主要是针对单元测试的应用,它可以很方便的解除单元测试中各种依赖,大大的降低了编写单元测试的难度 2、什么是mock server 正常情况下:测试客户端——测试——> 被测系统 ——依赖——>外部服务依赖 在被测系统和…...
分立式BUCK电路原理与制作持续更新
目录 一、分立式BUCK电路总体原理图 二、BUCK电路与LDO的区别 三、BUCK电路为什么要加电感 四、BUCK电路要加续流二极管 五、BUCK电路导通与断开的回路 六、电源公式的中的几个表示方式 1、输入功率用Pin表示 2、输出功率用Po表示 3、电源的效率公式:电源的…...
2023年大数据与计算国际会议 (WBDC 2023)| EI、Scoups检索
会议简介 Brief Introduction 2023年大数据与计算国际会议(WBDC 2023) 会议时间:2023年11月17 -19日 召开地点:中国西安 大会官网:www.iwbdc.org 2023年大数据与计算国际会议(WBDC 2023)将围绕“…...
Grafana V10 告警推送 邮件
最近项目建设完成,一个城域网项目,相关zabbix和grafana展示已经完,想了想,不想天天看平台去盯网络监控平台,索性对告警进行分类调整,增加告警的推送,和相关部门的提醒,其他部门看不懂…...
【OpenCV常用函数:视频捕获函数】cv2.VideoCapture
文章目录 1、cv2.VideoCapture() 1、cv2.VideoCapture() 输入视频路径,创建VideoCapture的对象 cv2.VideoCapture(filename) filename: 视频文件的路径视频名扩展名该类的函数有: 1)video.isOpened: 检查视频捕获是否成功 2)vid…...
脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)
一、数据处理与分析实战 (一)实时滤波与参数调整 基础滤波操作 60Hz 工频滤波:勾选界面右侧 “60Hz” 复选框,可有效抑制电网干扰(适用于北美地区,欧洲用户可调整为 50Hz)。 平滑处理&…...
突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合
强化学习(Reinforcement Learning, RL)是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程,然后使用强化学习的Actor-Critic机制(中文译作“知行互动”机制),逐步迭代求解…...
以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:
一、属性动画概述NETX 作用:实现组件通用属性的渐变过渡效果,提升用户体验。支持属性:width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项: 布局类属性(如宽高)变化时&#…...
UE5 学习系列(三)创建和移动物体
这篇博客是该系列的第三篇,是在之前两篇博客的基础上展开,主要介绍如何在操作界面中创建和拖动物体,这篇博客跟随的视频链接如下: B 站视频:s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...
自然语言处理——Transformer
自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效,它能挖掘数据中的时序信息以及语义信息,但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN,但是…...
AI书签管理工具开发全记录(十九):嵌入资源处理
1.前言 📝 在上一篇文章中,我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源,方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包,彻底改变了静态资源管理的…...
AspectJ 在 Android 中的完整使用指南
一、环境配置(Gradle 7.0 适配) 1. 项目级 build.gradle // 注意:沪江插件已停更,推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...
rnn判断string中第一次出现a的下标
# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...
Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析(Parser) 2.4、执行sql 1. 预处理(Preprocessor) 2. 查询优化器(Optimizer) 3. 执行器…...
Netty从入门到进阶(二)
二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架,用于…...
