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

01-Ajax入门与axios使用、URL知识

news 文章来源：https://blog.csdn.net/qq_63981644/article/details/143731691 2025/5/22 13:02:05

欢迎来到“雪碧聊技术”CSDN博客！

在这里，您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者，还是具有一定经验的开发者，相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导，我将不断探索Java的深邃世界，分享最新的技术动态、实战经验以及项目心得。

让我们一同在Java的广阔天地中遨游，携手提升技术能力，共创美好未来！感谢您的关注与支持，期待在“雪碧聊技术”与您共同成长！

目录

一、什么是Ajax？

二、如何使用Ajax？

1、先使用axios库，与服务器进行数据通信。

 ①引入axios.js

②使用axios函数

举例：

三、学习URL

1、为什么要认识url？

2、什么是url？

3、url的组成：协议、域名、资源路径

4、练习

5、总结

一、什么是Ajax？

        使用XMLHttpRequest对象与服务器通信。特点是“异步”，在不刷新页面的情况下就能与服务器通信、更新页面。

二、如何使用Ajax？

1、先使用axios库，与服务器进行数据通信。

 ①引入axios.js

②使用axios函数

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

举例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>01.Ajax概念和axios使用</title>
</head>
<body><p class="my-p"></p><!-- 第一步：引入axios库 --><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/* 第二步：使用axios语法 */axios({url: 'http://hmajax.itheima.net/api/province'}).then(result=>{console.log(result)//好习惯：多打印console.log(result.data.list)//将集合对象转为字符串，并将字符串加入标签内document.querySelector(".my-p").innerHTML = result.data.list})</script>
</body></html>

效果：

三、学习URL

1、为什么要认识url？

        知道url的作用和组成，方便与后端人员沟通。

2、什么是url？

        url：统一资源定位符，简称网址，用于访问网络上的资源。

        简单来说，每一个url，都对应着网络上的一个资源。

        举例：

3、url的组成：协议、域名、资源路径

  • 协议：规定浏览器和服务器之间传输数据的格式

        举例：http协议，是超文本传输协议，规定了浏览器和服务器之间传输数据的格式。

  • 域名：用于标记服务器在互联网中的位置。

        举例：

  • 资源路径：标记资源在服务器下的具体位置。

        举例：

4、练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>获取新闻列表</title>
</head>
<body><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/* 第二步：使用axios语法 */axios({url: 'http://hmajax.itheima.net/api/news'}).then(result => {console.log(result)})</script>
</body>
</html>

运行结果：

5、总结

相关文章：

01-Ajax入门与axios使用、URL知识

欢迎来到“雪碧聊技术”CSDN博客&#xff01; 在这里&#xff0c;您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者&#xff0c;还是具有一定经验的开发者&#xff0c;相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导&#xff0c;我将…...

编程日记 2024/11/14 13:14:20

第四十五章 Vue之Vuex模块化创建（module）

目录 一、引言 二、模块化拆分创建方式 三、模块化拆分完整代码 3.1. index.js 3.2. module1.js 3.3. module2.js 3.4. module3.js 3.5. main.js 3.6. App.vue 3.7. Son1.vue 3.8. Son2.vue 四、访问模块module的state ​五、访问模块中的getters ​六、mutati…...

编程日记 2024/11/14 13:13:19

[2024最新] macOS 发起 Bilibili 直播（不使用 OBS)

文章目录 1、B站账号 主播认证2、开启直播3、直播设置添加素材、隐私设置指定窗口添加/删除 窗口 4、其它说明官方直播帮助中心直播工具教程 目前搜到的 macOS 直播教程都比较古早&#xff0c;大部分都使用 OBS&#xff0c;一番探索下来&#xff0c;发现目前已经不需要 OBS了&a…...

编程日记 2024/11/14 13:12:18

Netty实现WebSocket Client三种典型方式

一、简单版本 package com.ptc.ai.box.biz.relay.client;import io.netty.bootstrap.Bootstrap; import io.netty.channel.Channel; import io.netty.channel.ChannelFuture; import io.netty.channel.ChannelFutureListener; import io.netty.channel.ChannelHandlerContext;…...

编程日记 2024/11/14 13:11:17

软间隔支持向量机

软间隔支持向量机 ​ 我们先直接给出软间隔支持向量机的形式&#xff1a; P min ⁡ ω , b , ζ 1 2 ∥ ω ∥ 2 2 − C ∑ i 1 m ζ i s . t . y i ( ω x i b ) ≥ 1 − ζ i , i 1 , 2 , 3.. m ζ i ≥ 0 , i 1 , 2 , 3.. m P \min_{\omega,b,\zeta} \frac{1}{2}\Ve…...

编程日记 2024/11/14 13:09:14

在C++上实现反射用法

0. 简介 最近看很多端到端的工作&#xff0c;发现大多数都是基于mmdet3d来做的&#xff0c;而这个里面用的比较多的形式就是反射机制&#xff0c;这样其实可以比较好的通过类似plugin的形式完成模型模块的插入。当然我们这里不是来分析python的反射机制的。我们这篇文章主要来…...

编程日记 2024/11/14 13:07:12

【学术会议介绍，SPIE 出版】第四届计算机图形学、人工智能与数据处理国际学术会议 (ICCAID 2024，12月13-15日)

第四届计算机图形学、人工智能与数据处理国际学术会议 2024 4th International Conference on Computer Graphics, Artificial Intelligence and Data Processing (ICCAID 2024) 重要信息 大会官网&#xff1a;www.iccaid.net 大会时间&#xff1a;2024年12月13-15日 大会地…...

编程日记 2024/11/14 13:03:08

网络百问百答（一）

什么是链接&#xff1f; 链接是指两个设备之间的连接&#xff0c;它包括用于一个设备能够与另一个设备通信的电缆类型和协议。OSI参考模型的层次是什么&#xff1f; 有7个OSI层&#xff1a;物理层&#xff0c;数据链路层&#xff0c;网络层&#xff0c;传输层&#xff0c;会话层…...

编程日记 2024/11/14 13:02:06

【深圳大学】数据结构A+攻略（计软版）

1. 考试 1.1 形式 分为平时&#xff0c;笔试&#xff0c;机试三部分。其中&#xff1a; 平时占30%&#xff0c;包含平时OJ测验和课堂练习&#xff0c;注意这个可能会因老师的不同和课题组的新策略而改变。笔试占60%&#xff0c;是分值占比的主要部分。机试占10%。 1.2 题型…...

编程日记 2024/11/14 13:01:04

解读《ARM Cortex-M3 与Cortex-M4 权威指南》——第4章 架构

推荐大佬做的讲解 可以帮助加深理解 ARM架构及汇编 Cortex-M3 和 Cortex-M4 处理器都是基于ARMv7-M架构 需要完成对编程模型、异常（如中断）如何处理、存储器映射、如何使用外设以及如何使用微控制器供应商提供的软件驱动库文件等 Cortex-M3和Cortex-M4处理器有两种操作状态…...

编程日记 2024/11/14 12:57:57

探索 Python HTTP 的瑞士军刀：Requests 库

文章目录 探索 Python HTTP 的瑞士军刀&#xff1a;Requests 库第一部分&#xff1a;背景介绍第二部分&#xff1a;Requests 库是什么&#xff1f;第三部分&#xff1a;如何安装 Requests 库&#xff1f;第四部分&#xff1a;Requests 库的基本函数使用方法第五部分&#xff1a…...

编程日记 2024/11/14 12:56:52

PostgreSQL 页损坏如何修复

PostgreSQL 错误&#xff1a;关系 base/46501/52712 中的块 480 存在无效的页。 当我们在使用 PostgreSQL 数据库的时候&#xff0c;如果服务器发生 CRASH 或者断电等异常情况的时候&#xff0c;有可能会遇到上面的这个报错信息。那么我们如何去修复这个数据呢&#xff0c;以及…...

编程日记 2024/11/14 12:55:50

Leetcode 75 Sort colors

题意&#xff1a;荷兰国旗问题&#xff0c;给一个数组[0,0,2,1,0]&#xff0c;构造成[0,0,0,1,2]的形式&#xff0c;分成三块 https://leetcode.com/problems/sort-colors/description/ 题解&#xff1a; 在任意时刻&#xff0c;i 左边的数都是 0&#xff0c;k 右边的数都是 …...

编程日记 2024/11/14 12:54:49

如何进行数据库连接池的参数优化？

以下是进行数据库连接池参数优化的一些方法&#xff1a; 一、确定合适的初始连接数&#xff1a; 考虑因素&#xff1a;数据库的规模、应用程序的启动需求以及预期的初始负载。如果数据库规模较小且应用程序启动时对数据库的即时访问需求不高&#xff0c;可以将初始连接数设置…...

编程日记 2024/11/14 12:52:47

有了miniconda，再也不用担心python、nodejs、go的版本问题了

哈喽&#xff0c;大家好&#xff01;我是「励志前端小黑哥」&#xff0c;我带着最新发布的文章又来了&#xff01; 专注前端领域10年&#xff0c;专门分享那些没用的前端知识&#xff01; 今天要分享的内容&#xff0c;是一个免费的环境管理工具&#xff0c;它叫Miniconda&…...

编程日记 2024/11/14 12:51:44

openresty入门教程：init_by_lua_block

init_by_lua_block 是 Nginx 配置中用于在 Nginx 启动时执行 Lua 脚本的一个指令。这个指令通常用于初始化全局变量、设置共享内存&#xff0c;或者执行一些需要在服务器启动时完成的准备工作。 以下是一个简单的 init_by_lua_block 使用示例&#xff1a; 1. 安装 Nginx 和 L…...

编程日记 2024/11/14 12:49:40

sol机器人pump机器人如何实现盈利的？什么是Pump 扫链机器人？

什么是Pump 扫链机器人&#xff0c;它的盈利逻辑优化策略是什么&#xff1f; Pump 扫链机器人&#xff0c;通过智能化、自动化的买卖操作帮助投资者实现快速盈利。在此基础上&#xff0c;我们对该机器人的盈利逻辑进行了深度优化&#xff0c;涵盖了买入策略和止盈策略的各个方面…...

编程日记 2024/11/14 12:44:37

Spring-boot 后端java配置接口返回jsp页面

Spring-boot 后端java配置接口返回jsp页面 spring boot 基于spring MVC的基础上进行了改进&#xff0c; 将Controller 与ResponseBody 进行了合并成一个新的注解 RestController。 当用户请求时&#xff0c;需要有视图渲染的&#xff0c;与请求数据的请求分别使用 1.在appli…...

编程日记 2024/11/14 12:42:35

LabVIEW车辆侧翻预警系统

在工业和实验室环境中&#xff0c;搬运车辆、叉车和特种作业车辆经常在负载和高速转弯过程中发生侧翻事故&#xff0c;导致设备损坏和人员伤害。为提高工作环境的安全性&#xff0c;开发了一种基于LabVIEW的工业车辆侧翻预警系统&#xff0c;能够实时监测车辆状态并发出预警&am…...

编程日记 2024/11/14 12:36:29

亲测有效：Maven3.8.1使用Tomcat8插件启动项目

我本地maven的settings.xml文件中的配置&#xff1a; <mirror><id>aliyunmaven</id><mirrorOf>central</mirrorOf><name>阿里云公共仓库</name><url>https://maven.aliyun.com/repository/public</url> </mirror>…...

编程日记 2024/11/14 12:35:28

Find My电子体温计|苹果Find My技术与体温计结合，智能防丢，全球定位

电子体温计由温度传感器&#xff0c;液晶显示器&#xff0c;纽扣电池&#xff0c;专用集成电路及其他电子元器件组成。能快速准确地测量人体体温&#xff0c;与传统的水银玻璃体温计相比&#xff0c;具有读数方便&#xff0c;测量时间短&#xff0c;测量精度高&#xff0c;能记…...

编程日记 2024/11/14 12:34:27

jmeter常用配置元件介绍总结之后置处理器

系列文章目录 安装jmeter jmeter常用配置元件介绍总结之后置处理器 8.后置处理器8.1.CSS/JQuery提取器8.2.JSON JMESPath Extractor8.3.JSON提取器8.4.正则表达式提取器8.5.边界提取器8.5.Debug PostProcessor8.6.XPath2 Extractor8.7.XPath提取器8.8.结果状态处理器 8.后置处理…...

编程日记 2024/11/14 12:32:25

html5多媒体标签

文章目录 HTML5新增多媒体标签详解&#xff1a;视频标签与音频标签视频标签<video>音频标签<audio>代码案例 HTML5新增多媒体标签详解&#xff1a;视频标签与音频标签 HTML5引入了多项新特性&#xff0c;其中多媒体标签的引入为网页开发带来了革命性的变化。这些标…...

编程日记 2024/11/14 12:30:22

51c自动驾驶~合集10

我自己的原文哦~ https://blog.51cto.com/whaosoft/11638131 #端到端任务 说起端到端&#xff0c;每个从业者可能都觉得会是下一代自动驾驶量产方案绕不开的点&#xff01;特斯拉率先吹响了方案更新的号角&#xff0c;无论是完全端到端&#xff0c;还是专注于planner的模型&a…...

编程日记 2024/11/14 12:29:21

JAVA学习日记（十五） 数据结构

一、数据结构概述 数据结构是计算机底层存储、组织数据的方式。 数据结构是指数据相互之间以什么方式排列在一起的。 数据结构是为了更加方便的管理和使用数据&#xff0c;需要结合具体的业务场景来进行选择。 二、常见的数据结构 &#xff08;一&#xff09;栈 特点&…...

编程日记 2024/11/14 12:27:19

室内定位论文精华-无人机与机器人在地下与室内环境中的自主导航与定位新技术

天文导航算法在低成本视觉系统中的应用 关键词 天文导航；自主无人机；GNSS拒止环境；稳定成像系统；星图识别；姿态估计；位置估算 研究问题 现代无人驾驶飞行器（UAV）中，很少使用天文学导航技术。传统的天文学导航依赖于稳定的成像系统，这不仅体积大且重量重，难以满足…...

编程日记 2024/11/14 12:26:17

Java 中如何自定义一个类加载器，加载自己指定的类？

文章目录 为什么要自定义类加载器&#xff1f;类加载器的基本原理自定义类加载器的步骤1. 继承 ClassLoader 类2. 编写 findClass 方法 代码示例代码解释 使用自定义类加载器加载类执行结果注意事项总结推荐阅读文章 在 Java 中&#xff0c;类加载器&#xff08;ClassLoader&am…...

编程日记 2024/11/14 12:25:16

LeetCode【0037】解数独

本文目录 1 中文题目2 求解方法&#xff1a;递归回溯法2.1 方法思路2.2 Python代码2.3 复杂度分析 3 题目总结 1 中文题目 编写一个程序&#xff0c;通过填充空格来解决数独问题。数独的解法需 遵循如下规则&#xff1a; 数字 1-9 在每一行只能出现一次。数字 1-9 在每一列只…...

编程日记 2024/11/14 12:22:12

计算机视觉 ---常见图像文件格式及其特点

常见的图像文件格式及其特点如下&#xff1a; JPEG&#xff08;Joint Photographic Experts Group&#xff09; 特点&#xff1a; 有损压缩&#xff1a;通过丢弃一些图像数据来实现高压缩比&#xff0c;能显著减小文件大小&#xff0c;适合用于存储照片等色彩丰富的图像。但过…...

编程日记 2024/11/14 12:20:07

Cent OS-7的Apache服务配置

WWW是什么&#xff1f; WWW&#xff08;World Wide Web&#xff0c;万维网&#xff09;是一个全球性的信息空间&#xff0c;其中的文档和其他资源通过URL标识&#xff0c;并通过HTTP或其他协议访问。万维网是互联网的一个重要组成部分&#xff0c;但它并不是互联网的全部。互联…...

编程日记 2024/11/14 12:19:05