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

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

news 2026/3/31 11:12:53

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

别再纠结了！.NET后台任务调度，Hangfire和Quartz.NET到底怎么选？

Hangfire与Quartz.NET深度抉择指南&#xff1a;从业务场景到技术实现的精准匹配 在.NET生态系统中&#xff0c;后台任务调度是几乎所有企业级应用都无法绕开的核心需求。无论是电商平台的订单状态更新、金融系统的日终批处理&#xff0c;还是内容管理系统的定时数据同步&#x…...

编程新知 2026/3/31 10:51:00

Qwen3-0.6B应用案例：如何用它快速生成文案和邮件回复

Qwen3-0.6B应用案例&#xff1a;如何用它快速生成文案和邮件回复 1. 引言&#xff1a;轻量级AI写作助手 在日常工作中&#xff0c;我们经常需要处理大量文字工作&#xff1a;撰写产品介绍、回复客户邮件、编写营销文案等。这些任务虽然不复杂&#xff0c;但耗时耗力。Qwen3-0…...

编程新知 2026/3/31 10:36:52

忍者绘卷Z-Image Turbo新手避坑：3个技巧搞定负向提示词

忍者绘卷Z-Image Turbo新手避坑&#xff1a;3个技巧搞定负向提示词 1. 负向提示词在忍者绘卷中的特殊价值 在忍者绘卷Z-Image Turbo这个专为二次元/火影忍者风格优化的AI绘画工具中&#xff0c;负向提示词扮演着"封印术"般的角色。它不仅仅是简单的排除列表&#x…...

编程新知 2026/3/31 10:32:45

RWKV7-1.5B-g1a轻量部署方案：中小企业AI落地首选，年省GPU成本超40%

RWKV7-1.5B-g1a轻量部署方案&#xff1a;中小企业AI落地首选&#xff0c;年省GPU成本超40% 1. 为什么选择RWKV7-1.5B-g1a 在当今AI技术快速发展的背景下&#xff0c;中小企业往往面临高昂的GPU计算成本和技术门槛。rwkv7-1.5B-g1a作为一款基于RWKV-7架构的多语言文本生成模型…...

编程新知 2026/3/31 10:18:26

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

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

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

怎样避免网站因 SEO 优化而被搜索引擎惩罚

<h2>怎样避免网站因 SEO 优化而被搜索引擎惩罚</h2> <p>在当今数字化时代&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;已经成为了任何网站想要获得流量和提升知名度的关键因素。SEO 优化的过程并不是一帆风顺&#xff0c;特别是在过度优化时&#x…...

编程新知 2026/3/31 9:20:02

ViT在语义分割中的性能优化：从VOC2012数据集看如何提升自行车识别准确率

ViT在语义分割中的性能优化&#xff1a;从VOC2012数据集看如何提升自行车识别准确率 语义分割作为计算机视觉领域的核心任务之一&#xff0c;其目标是为图像中的每个像素分配类别标签。近年来&#xff0c;Vision Transformer&#xff08;ViT&#xff09;凭借其强大的全局建模能…...

编程新知 2026/3/31 9:11:56

白鲸开源架构师获邀成为 ASF Member

在技术领域&#xff0c;我们常常被那些闪耀的、可见的成果所吸引。今天&#xff0c;这个焦点无疑是大语言模型技术。它们的流畅对话、惊人的创造力&#xff0c;让我们得以一窥未来的轮廓。然而&#xff0c;作为在企业一线构建、部署和维护复杂系统的实践者&#xff0c;我们深知…...

编程新知 2026/3/31 8:19:36

WindowsCleaner：3个步骤解决C盘爆红问题的终极指南

WindowsCleaner&#xff1a;3个步骤解决C盘爆红问题的终极指南 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服&#xff01; 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner 你是否也经历过C盘突然变红、系统卡顿不堪的困扰&a…...

编程新知 2026/3/31 7:49:25

图图的嗨丝造相-Z-Image-Turbo效果对比：8bit vs 16bit精度推理对渔网袜边缘锐度的影响

图图的嗨丝造相-Z-Image-Turbo效果对比&#xff1a;8bit vs 16bit精度推理对渔网袜边缘锐度的影响 1. 引言&#xff1a;当AI绘画遇上“渔网袜”细节 最近在玩一个挺有意思的AI绘画模型——图图的嗨丝造相-Z-Image-Turbo。这个模型专门针对“大网渔网袜”这种特定服饰的生成做…...

编程新知 2026/3/31 7:47:24