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

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

news 2026/3/31 13:29:31

欢迎来到“雪碧聊技术”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

从信任根到信任链：构建坚不可摧的数字信任体系

1. 信任根&#xff1a;数字世界的安全基石 想象一下你正在建造一座摩天大楼。无论设计多么精妙&#xff0c;如果地基不牢固&#xff0c;整栋建筑都可能坍塌。在数字安全领域&#xff0c;**信任根&#xff08;Root of Trust, RoT&#xff09;**就是这样的地基。它是一个密码系统…...

编程新知 2026/3/31 12:39:58

如何突破思维导图协作瓶颈？云端协同与知识管理新方案

如何突破思维导图协作瓶颈&#xff1f;云端协同与知识管理新方案 【免费下载链接】kityminder 百度脑图 项目地址: https://gitcode.com/gh_mirrors/ki/kityminder 在数字化办公环境中&#xff0c;思维导图作为梳理思路、规划项目的重要工具&#xff0c;其价值已得到广泛…...

编程新知 2026/3/31 12:37:57

终极指南：如何快速构建响应式React网格布局

终极指南&#xff1a;如何快速构建响应式React网格布局 【免费下载链接】react-grid-layout A draggable and resizable grid layout with responsive breakpoints, for React. 项目地址: https://gitcode.com/gh_mirrors/re/react-grid-layout React网格布局&#xff0…...

编程新知 2026/3/31 12:35:52

如何高效使用小米手表表盘制作工具：Mi-Create完整操作指南

如何高效使用小米手表表盘制作工具&#xff1a;Mi-Create完整操作指南 【免费下载链接】Mi-Create Unofficial watchface creator for Xiaomi wearables ~2021 and above 项目地址: https://gitcode.com/gh_mirrors/mi/Mi-Create 想为你的小米手表或手环设计个性化表盘吗…...

编程新知 2026/3/31 12:35:52

JETSON平台SDKManager一站式部署指南：从刷机到外置存储系统迁移

1. 开箱即用&#xff1a;JETSON开发板基础准备 刚拿到JETSON开发板时&#xff0c;很多开发者会对着这块巴掌大的硬件发懵。以我经手过的几十块JETSON TX2 NX为例&#xff0c;正确的开箱姿势应该是先检查配件完整性。除了开发板本体&#xff0c;你还需要准备&#xff1a; 5V/4…...

编程新知 2026/3/31 12:23:42

如何通过Snap Hutao实现原神游戏决策的智能化？

如何通过Snap Hutao实现原神游戏决策的智能化&#xff1f; 【免费下载链接】Snap.Hutao 实用的开源多功能原神工具箱 &#x1f9f0; / Multifunctional Open-Source Genshin Impact Toolkit &#x1f9f0; 项目地址: https://gitcode.com/GitHub_Trending/sn/Snap.Hutao …...

编程新知 2026/3/31 11:37:17

Venera漫画阅读器：跨平台智能阅读的终极指南

Venera漫画阅读器&#xff1a;跨平台智能阅读的终极指南 【免费下载链接】venera A comic app 项目地址: https://gitcode.com/gh_mirrors/ve/venera 想要在Android、iOS、Windows、macOS和Linux上享受无缝的漫画阅读体验吗&#xff1f;Venera漫画阅读器正是您需要的终极…...

编程新知 2026/3/31 10:16:25

FreeRTOS进阶：任务优先级与调度策略深度解析

1. FreeRTOS任务优先级基础 在嵌入式实时操作系统中&#xff0c;任务优先级决定了任务执行的先后顺序。FreeRTOS采用数值越大优先级越高的设计&#xff0c;优先级范围通常为0到(configMAX_PRIORITIES-1)。我刚开始接触FreeRTOS时&#xff0c;经常混淆这个概念&#xff0c;直到在…...

编程新知 2026/3/31 9:48:14

Pixel Aurora Engine实战落地：为像素RPG自动生成NPC对话头像与场景贴图

Pixel Aurora Engine实战落地&#xff1a;为像素RPG自动生成NPC对话头像与场景贴图 1. 像素游戏开发者的新利器 想象一下这样的场景&#xff1a;你正在开发一款像素风格的RPG游戏&#xff0c;需要为上百个NPC设计独特的对话头像&#xff0c;还要制作大量场景贴图。传统方法下…...

编程新知 2026/3/31 8:55:52

PCIe金手指设计避坑指南：从硬件选型到PCB布局的5个关键细节

PCIe金手指设计避坑指南&#xff1a;从硬件选型到PCB布局的5个关键细节 在高速数字系统设计中&#xff0c;PCIe金手指接口的可靠性直接决定了扩展卡的识别成功率和数据传输稳定性。许多工程师在完成原理图设计和PCB布局后&#xff0c;常会遇到设备频繁识别失败、链路训练不通过…...

编程新知 2026/3/31 8:53:51