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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/470586.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HarmonyOS Next星河版笔记--界面开发(4)

布局 1.1.线性布局 线性布局通过线性容器column和row创建 column容器&#xff1a;子元素垂直方向排列row容器&#xff1a;子元素水平方向排列 1.1.1.排布主方向上的对齐方式&#xff08;主轴&#xff09; 属性&#xff1a;.justifyContent&#xff08;枚举FlexAlign&#…

webpack loader全解析,从入门到精通(10)

webpack 的核心功能是分析出各种模块的依赖关系&#xff0c;然后形成资源列表&#xff0c;最终打包生成到指定的文件中。更多复杂的功能需要借助 webpack loaders 和 plugins 来完成。 1. 什么是 Loader Loader 本质上是一个函数&#xff0c;它的作用是将某个源码字符串转换成…

如何用WordPress和Shopify提升SEO表现?

选择合适的建站程序对于SEO优化非常重要。目前&#xff0c;WordPress和Shopify是两种备受推崇的建站平台&#xff0c;各有优势。 WordPress最大的优点是灵活性。它支持大量SEO插件&#xff0c;帮助你调整元标签、生成站点地图、优化内容结构等。这些功能让你能够轻松地提升网站…

ArcGIS Pro属性表乱码与字段名3个汉字解决方案大总结

01 背景 我们之前在使用ArcGIS出现导出Excel中文乱码及shp添加字段3个字被截断的情况&#xff0c;我们有以下应对策略&#xff1a; 推荐阅读&#xff1a;ArcGIS导出Excel中文乱码及shp添加字段3个字被截断&#xff1f; 那如果我们使用ArGIS Pro出现上述问题&#xff0c;该如何…

24/11/13 算法笔记<强化学习> DQN算法

DQN算法的主要特点包括&#xff1a; 神经网络代替Q表&#xff1a;在传统的Q学习中&#xff0c;需要维护一个Q表来存储每个状态-动作对的Q值。而在DQN中&#xff0c;使用神经网络来近似这些Q值&#xff0c;这使得算法能够处理具有大量状态和动作的问题。 经验回放&#xff08;E…

Blender进阶:图像纹理节点和映射节点

13 图像纹理节点 13.1 图像纹理节点 图像纹理节点&#xff0c;用于加载一张贴图 加载图片后&#xff0c;可以从图片上取得一个像素点。 输入&#xff1a;一个坐标矢量 输出&#xff1a;该坐标的像素颜色 演示&#xff1a;使用合并xyz节点来指定坐标。。 13.2 多种贴图 一…

MYSQL 库,表 基本操作

相关的两个编码集(简单了解即可) 1.数据库编码集 :对将要存储的数据进行编码 2.数据库校验集:对将要执行的操作&#xff08;增删查改&#xff09;数据是对数据编码的校验&#xff0c;本质也是一种读取数据库中数据库采用的一种编码格式。 总结&#xff1a;数据库无论对数据做…

万字长文分析函数式编程

目录 一.认识函数式编程 一、函数式编程的定义 二、函数式编程的思想 三、函数式编程的特点 四、函数式编程的应用 二.Lambda表达式 三.Stream流 3.1 创建流对象 3.2 注意事项 3.3 Stream流的中间操作 filter map distinct sorted limit skip flatMap 3.4 St…

DOM 规范 — MutationObserver 接口

前言 最近在重学 JavaScript 中&#xff0c;再一次接触到了 MutationObserver 内容&#xff0c;接着联想到了 Vue 源码中有使用过这个接口&#xff0c;因此觉得有必要对 MutationObserver 接口进行相关了解和学习。 下面是 vue 源码中关于 MutationObserver 接口使用的代码&a…

灰狼优化算法

一、简介 1.1 灰狼优化算法-Grey Wolf Optimizer 通过模拟灰狼群体捕食行为&#xff0c;基于狼群群体协 作的机制来达到优化的目的。&#xff27;&#xff37;&#xff2f;算法具有结构简单、需 要调节的参数少、容易实现等特点&#xff0c;其中存在能够自适应调整 的收敛因子…

AI 写作(五)核心技术之文本摘要:分类与应用(5/10)

一、文本摘要&#xff1a;AI 写作的关键技术 文本摘要在 AI 写作中扮演着至关重要的角色。在当今信息爆炸的时代&#xff0c;人们每天都被大量的文本信息所包围&#xff0c;如何快速有效地获取关键信息成为了一个迫切的需求。文本摘要技术正是为了解决这个问题而诞生的&#x…

【 ElementUI 组件Steps 步骤条使用新手详细教程】

本文介绍如何使用 ElementUI 组件库中的步骤条组件完成分步表单设计。 效果图&#xff1a; 基础用法​ 简单的步骤条。 设置 active 属性&#xff0c;接受一个 Number&#xff0c;表明步骤的 index&#xff0c;从 0 开始。 需要定宽的步骤条时&#xff0c;设置 space 属性即…

尽量通俗易懂地概述.Net U nity跨语言/跨平台相关知识

本文参考来自唐老狮,Unity3D高级编程:主程手记,ai等途径 仅作学习笔记交流分享 目录 1. .Net是什么? 2. .Net框架的核心要点? 跨语言和跨平台 .Net x Unity跨平台发展史 Net Framework 2002 Unity跨平台之 Mono 2004 Unity跨平台之 IL2CPP 2015 二者区别 .NET Core …

基于yolov8、yolov5的番茄成熟度检测识别系统(含UI界面、训练好的模型、Python代码、数据集)

摘要&#xff1a;番茄成熟度检测在农业生产及质量控制中起着至关重要的作用&#xff0c;不仅能帮助农民及时采摘成熟的番茄&#xff0c;还为自动化农业监测提供了可靠的数据支撑。本文介绍了一款基于YOLOv8、YOLOv5等深度学习框架的番茄成熟度检测模型&#xff0c;该模型使用了…

应用程序部署(IIS的相关使用,sql server的相关使用)

数据服务程序&#xff08;API&#xff09;部署 1、修改配置文件 打开部署包中的web.config配置文件&#xff0c;确认数据库登录名和密码正确 修改ip为电脑IP&#xff08;winR输入cmd&#xff0c;输入ipconfig&#xff0c;IPv4对应的就是本机IP&#xff09; 2、打开IIS&#x…

网页版五子棋——对战模块(服务器端开发②)

前一篇文章&#xff1a;网页版五子棋——对战模块&#xff08;服务器端开发①&#xff09;-CSDN博客 项目源代码&#xff1a;Java: 利用Java解题与实现部分功能及小项目的代码集合 - Gitee.com 目录 前言 一、创建并注册 GameAPI 类 1.创建 GameAPI 类 2.注册 GameAPI 类 …

STM32单片机WIFI语音识别智能衣柜除湿消毒照明

实践制作DIY- GC0196-WIFI语音识别智能衣柜 一、功能说明&#xff1a; 基于STM32单片机设计-WIFI语音识别智能衣柜 二、功能介绍&#xff1a; STM32F103C系列最小系统板LCD1602显示器ULN2003控制的步进电机&#xff08;柜门开关&#xff09;5V加热片直流风扇紫外消毒灯DHT11…

网络远程操控

1.给两个设备配上ip地址让他们能通 2.开启远程管理功能&#xff0c;打开telnet 3.创建远程管理的账号和密码&#xff0c;账号权限 输入system-view进入视图&#xff0c;不敲这个命令不能进行配置 配好ip后进入AR1ping一下AR2的ip看看通不通&#xff0c;接着进入AR2开启telnet权…

【go从零单排】Timer、Epoch 时间函数

&#x1f308;Don’t worry , just coding! 内耗与overthinking只会削弱你的精力&#xff0c;虚度你的光阴&#xff0c;每天迈出一小步&#xff0c;回头时发现已经走了很远。 &#x1f4d7;概念 在 Go 语言中&#xff0c;time.Timer 是一个用于在指定时间后执行操作的计时器。…

鸿蒙自定义UI组件导出使用

上期讲解了在Entry入口写了一个系统的下拉列表组件&#xff0c;如果我们想要封装一个可供复用的组件供团队其他人使用&#xff0c;那么需要掌握一下自定义组件的写法&#xff1a; 1、自定义可导入组件 - export 声明模块 如果要定义一个在外部可使用的组件 , 需要再定义组件…