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

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

news 2026/5/22 13:03:38

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

我用AI一周做了个口播视频平台，现在开源了

做独立开发这两年&#xff0c;我一直在想一个问题&#xff1a;一个人到底能做到什么程度&#xff1f; 上周我给出了自己的答案——我用 DeepSeek 定义需求 CodeBuddy 辅助编码&#xff0c;一个人从零搞了一个 AI 口播视频生成平台&#xff0c;取名智播坊。输入文案&#xff0…...

编程新知 2026/5/22 12:39:17

2026 Java面试真题库（基础+进阶+大厂场景题）

面试前期准备不充分其实就是对自己的不负责任&#xff0c;也是在浪费自己的时间&#xff0c;今天为大家整理了一份实战文档&#xff0c;让你系统性的弄懂架构师筑基内容&#xff1a;Linux 基础与进阶高性能 Netty 框架MySQL并发编程进阶JVM 性能调优Tomacat注意&#xff1a;以下…...

编程新知 2026/5/22 12:26:32

HarmonyOS 6 Chip 组件：设置默认后缀图标使用文档

文章目录代码默认后缀图标核心配置1. 启用默认关闭图标2. 显示优先级规则3. 关联配置项代码解析1. 启用默认后缀图标2. 不冲突条件3. 整体结构总结默认后缀图标即 Chip 内置关闭图标&#xff0c;由系统提供样式、尺寸、交互逻辑&#xff0c;无需配置图片资源&#xff0c;只需开…...

编程新知 2026/5/22 9:43:19

专业级抖音资源自动化采集方案：douyin-downloader企业级部署指南

专业级抖音资源自动化采集方案&#xff1a;douyin-downloader企业级部署指南 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fall…...

编程新知 2026/5/22 9:36:56

Display Driver Uninstaller (DDU) 终极指南：显卡驱动彻底清理的完整解决方案

Display Driver Uninstaller (DDU) 终极指南&#xff1a;显卡驱动彻底清理的完整解决方案 【免费下载链接】display-drivers-uninstaller Display Driver Uninstaller (DDU) a driver removal utility / cleaner utility 项目地址: https://gitcode.com/gh_mirrors/di/displa…...

编程新知 2026/5/22 8:50:29

Sunshine游戏串流快速上手：3步搭建你的个人云游戏服务器

Sunshine游戏串流快速上手&#xff1a;3步搭建你的个人云游戏服务器 【免费下载链接】Sunshine Self-hosted game stream host for Moonlight. 项目地址: https://gitcode.com/GitHub_Trending/su/Sunshine 想要在任何设备上玩转PC游戏大作吗&#xff1f;Sunshine作为一…...

编程新知 2026/5/22 5:36:26

DCGAN原理解析：用卷积结构根治GAN模式坍缩

1. 项目概述&#xff1a;从手写数字到逼真猫脸&#xff0c;DCGAN如何让生成模型真正“看见”图像结构你有没有试过训练一个最基础的GAN&#xff0c;结果生成器输出的全是模糊的、像打了马赛克的灰扑扑色块&#xff1f;或者更糟——所有生成的图片都长得一模一样&#xff0c;只是…...

编程新知 2026/5/22 5:27:53

CANN/asc-devkit Ascend C矢量压缩API

asc_squeeze 【免费下载链接】asc-devkit 本项目是CANN 推出的昇腾AI处理器专用的算子程序开发语言&#xff0c;原生支持C和C标准规范&#xff0c;主要由类库和语言扩展层构成&#xff0c;提供多层级API&#xff0c;满足多维场景算子开发诉求。 项目地址: https://gitcode.co…...

编程新知 2026/5/22 5:02:09

RK3588 Android系统签名实战：为APK获取系统权限完整指南

1. 项目概述与核心价值在嵌入式Android开发领域&#xff0c;尤其是基于瑞芯微&#xff08;Rockchip&#xff09;平台如RK3588进行产品研发时&#xff0c;我们常常会遇到一个核心需求&#xff1a;如何让一个普通的第三方APK应用&#xff0c;获得系统级&#xff08;System&#x…...

编程新知 2026/5/22 1:55:21

好用的山西GEO服务商

你可能已经感受到&#xff1a;当客户在AI大模型里问“山西哪家GEO优化公司靠谱&#xff1f;”、“中小企业如何用AI引流”时&#xff0c;你的企业信息根本搜不到。流量入口变了&#xff0c;传统SEO正在失效。如果能选对一家GEO服务商&#xff0c;就能在这个新战场里抢占先机。我…...

编程新知 2026/5/22 1:42:19