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

news2024/11/14 23:35:27

欢迎来到“雪碧聊技术”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.coloradmin.cn/o/2240471.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

堆中的时间复杂度+TOP K问题

堆中的时间复杂度分析 回顾: 堆在物理上:数组 逻辑上:完全二叉树 1.堆排序是什么? // 排升序void HeapSort(int* a, int n){// 建大堆 -for (int i (n - 1 - 1) / 2; i > 0; --i){AdjustDown(a, n, i);}int end n - 1;while (end > 0){Swap(&a[0], &a[end]…

学Linux的第八天

目录 管理进程 概念 程序、进程、线程 进程分类 进程前后台调用 查看进程 ps命令 unix 风格 bsd风格 GNU风格 top命令 格式 统计信息区 进程信息区&#xff1a;显示了每个进程的运行状态 kill命令 作用 格式 管理进程 概念 程序、进程、线程 程序&#x…

网络初识--Java

一、网络通信基础 1.IP地址 IP地址主要⽤于标识⽹络主机、其他⽹络设备&#xff08;如路由器&#xff09;的⽹络地址。简单说&#xff0c;IP地址⽤于定位主 机的⽹络地址。 就像我们发送快递⼀样&#xff0c;需要知道对⽅的收货地址&#xff0c;快递员才能将包裹送到⽬的地。…

Linux软件包管理与Vim编辑器使用指南

目录 一、Linux软件包管理器yum 1.什么是软件包&#xff1f; 2.什么是软件包管理器&#xff1f; 3.查看软件包 4.安装软件 ​编辑 5.卸载软件 Linux开发工具&#xff1a; 二、Linux编辑器---vim 1.vim的基本概念 (1) 正常/普通模式&#xff08;Normal mode&#xff0…

标准库 -- 为什么 EXTI中断需要使能复用时钟与为什么不需要使能?

在STM32中&#xff0c;使用外部中断&#xff08;EXTI&#xff09;时需要使能复用功能&#xff0c;这和其他中断&#xff08;如串口中断、定时器中断&#xff09;有所不同。以下是为什么在使用外部中断时需要使能复用&#xff0c;以及其他中断不需要复用的原因。 一、为什么 EX…

深入理解ECDSA:椭圆曲线数字签名算法的原理与应用

目录 引言一、什么是ECDSA二、ECDSA的基本原理三、椭圆曲线四、ECDSA签名生成过程1、 生成私钥和公钥2、签名3、签名对的保存 五、ECDSA签名验证过程六、ECDSA的安全性七、篡改的消息如何被检测到八、 为什么B能够知道篡改&#xff1f;九、python代码示例总结 引言 在数字通信…

rocketmq——docker-compose安装

rocketmq安装 创建文件夹&#xff0c;这里我们分别部署namesrv和broker 1、namesrv.conf listenPort98762、broker.conf # 所属集群名字 brokerClusterNameDefaultCluster # broker 名字&#xff0c;注意此处不同的配置文件填写的不一样&#xff0c;如果在 broker-a.propert…

微积分复习笔记 Calculus Volume 1 - 5.5 Substitution

5.5 Substitution - Calculus Volume 1 | OpenStax

初试js反混淆

一、目标 ​ 最近js玩的花样越来越多了&#xff0c;本来简洁方便的一门开发语言&#xff0c;现在混淆的一塌糊涂。今天我们就介绍几种常见的反混淆方案。 混淆的本质就是等价替换&#xff0c;把 a 12 ,替换成 a 100 - 8 5 - 15 - 70。 把 “push” 替换成 “\u0070\u0075…

基于微信小程序的乡村研学游平台设计与实现,LW+源码+讲解

摘 要 信息数据从传统到当代&#xff0c;是一直在变革当中&#xff0c;突如其来的互联网让传统的信息管理看到了革命性的曙光&#xff0c;因为传统信息管理从时效性&#xff0c;还是安全性&#xff0c;还是可操作性等各个方面来讲&#xff0c;遇到了互联网时代才发现能补上自…

odoo17 前端 在头像下拉 dropdown 自定义菜单

odoo17 前端 在头像下拉 dropdown 自定义菜单 其实很简单, 我们先找到原来已经创建好的, 找到代码位置 使用 我的资料 为例 odoo-17.0\addons\hr\static\src\user_menu\my_profile.js /** odoo-module **/import { _t } from "web/core/l10n/translation"; import …

【解决】Layout 下创建槽位后,执行 Image 同步槽位位置后表现错误的问题。

开发平台&#xff1a;Unity 6.0 编程语言&#xff1a;CSharp 编程平台&#xff1a;Visual Studio 2022   一、问题背景 | 开发库存系统 图1 位置同步失败问题 图2 位置正常同步效果表现 黑框 作用于 UnityEngine.UI.GridLayoutGruop&#xff0c;形成 4x6 布局&#xff0c;如…

2023年MathorCup数学建模B题城市轨道交通列车时刻表优化问题解题全过程文档加程序

2023年第十三届MathorCup高校数学建模挑战赛 B题 城市轨道交通列车时刻表优化问题 原题再现&#xff1a; 列车时刻表优化问题是轨道交通领域行车组织方式的经典问题之一。列车时刻表规定了列车在每个车站的到达和出发&#xff08;或通过&#xff09;时刻&#xff0c;其在实际…

07-案例-图书管理

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

vue 依赖注入(Provide、Inject )和混入(mixins)

Prop 逐级透传问题​ 通常情况下&#xff0c;当我们需要从父组件向子组件传递数据时&#xff0c;会使用 props。想象一下这样的结构&#xff1a;有一些多层级嵌套的组件&#xff0c;形成了一棵巨大的组件树&#xff0c;而某个深层的子组件需要一个较远的祖先组件中的部分数据。…

九州未来再度入选2024边缘计算TOP100

随着数智化转型的浪潮不断高涨&#xff0c;边缘计算作为推动各行业智能化升级的重要基石&#xff0c;正在成为支持万物智能化的关键点。近日&#xff0c;德本咨询(DBC)联合《互联网周刊》(CIW)与中国社会科学院信息化研究中心(CIS)&#xff0c;共同发布《2024边缘计算TOP100》榜…

git相关知识

前言&#xff1a;在学习git之前首先需要了解几个概念&#xff1a;工作区&#xff0c;暂存区&#xff0c;版本库。 工作区&#xff1a;是电脑上写代码或者文件的目录。 暂存区&#xff1a;一般存放在.git目录下的index中&#xff0c;也称索引。&#xff08;git add&#xff09…

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

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

conda和conda的常用命令

目录 一、什么是conda 1. conda的定义和作用 2. conda的特点 3. conda与pip的区别 二、conda的常用命令 1. 环境管理 2.包管理 3. 查看信息 4. 清理和维护 5. 频道(channel)管理 6. 导出和复制环境 7. 加速相关(镜像) 一、什么是conda 1. conda的定义和作用 2. co…

mysql每日一题(上升的温度,date数据的计算)

日期之间的运算 日期类型的加法运算 data_add(now_data,interval 1 month) select date_add(now(), interval 1 day); -- 加1天 select date_add(now(), interval 1 hour); -- 加1小时 select date_add(now(), interval 1 minute); -- 加1分钟 select date_add(now(), inter…