Web前端开发——Ajax,Axios概述及在Vue框架中的使用

前言:

整理下学习笔记,打好基础,daydayup!!!

Ajax

Ajax是什么?

Ajax全称Asynchromous JavaScript And Xml,是异步的JavaScript和Xml。

Ajax的作用?

1,数据交换:通过Ajax可以给服务器发送请求,并获取服务器相应的数据

2,异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术

同步与异步

同步指当客户端向服务端访问的时候,客户端需要等待服务器的处理,期间不能执行其他操作。异步则在服务器在处理客户端的时候,客户端可以执行其他操作。如图所示:

(图片来源:黑马程序员)

Ajax的使用步骤

1,创建XMLHttpRequest对象:用于和服务器交换数据

2,向服务器发送请求

3,获取服务器相应数据

 示例如下:

由于Ajax过于繁琐,为了快速开发,将使用Axios封装Ajax,简化其书写

Axios

Axios是一个基于promise网络请求库,作用于node.js和浏览器中。在服务端它使用原生node.js模块,而在客户端使用XMLHttpRequests。

 Axios的使用

1,引入Axios的js文件

2,使用Axios发送请求,并获取响应结果

 示例如下:

1,引入Axios的js文件

<script src="js/axios-0.18.0.js"></script>//可在官网下载

 2,使用Axios发送请求,并获取响应结果

通过axios发送异步请求-getaxios({method: "get",//指定请求方式url: "请求网址"}).then(result => {console.log(result.data);})
//---------------------------------------通过axios发送异步请求-postaxios({method: "post",//指定请求方式url: "请求网址",data: "id=1"  //post请求需要指定id}).then(result => {console.log(result.data);})

 Axios的请求简化

axios常用的请求有四种get,delete,post,put。可以使用(axios.请求)的方式进行简化。示例如下:

通过axios发送异步请求-get 
axios.get("请求地址").then(result => {console.log(result.data);})//-----------------------------------
通过axios发送异步请求-postaxios.post("请求地址","id=1").then(result => {console.log(result.data);})

 Axios如何在Vue框架中使用

Vue是一个前端框架,基本使用可以参考这篇Web前端开发——Vue概述

 在调用Vue框架之后,可以在 mounted ()阶段中使用Axios进行挂载

<script>new Vue({el: "#app",//定义vue区域data: {emps:[]  //vue返回的数据},mounted () {//发送异步请求,加载数据axios.get("请求网址").then(result => {this.emps = result.data.data;})}});
</script>

如此就实现了 Axios在vue中的挂载,随后在body标签中加载内容即可。

整理结束,撒花!!!

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

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

相关文章

Python统计分析库之statsmodels使用详解

概要 Python statsmodels是一个强大的统计分析库,提供了丰富的统计模型和数据处理功能,可用于数据分析、预测建模等多个领域。本文将介绍statsmodels库的安装、特性、基本功能、高级功能、实际应用场景等方面。 安装 安装statsmodels库非常简单,可以使用pip命令进行安装:…

交通部 JT/T 808(809 1076 1078 )车辆卫星定位系统 通信协议介绍

1 行业标准协议 1.1 官方网站 交通运输标准化信息系统 (mot.gov.cn) 附上官方下载地址&#xff1a; JT/T 808-2019 道路运输车辆卫星定位系统 终端通信协议及数据格式 JT/T 809-2019 道路运输车辆卫星定位系统 平台数据交换 JT/T 1076-2016 道路运输车辆卫星定位系统 车…

zehpyr环境搭建和demo的编译

qemu可执行固件编译的探索 环境demo的模拟SDK构建zephyr环境设置安装依赖项下载 Aspeed Zephyr 软件包 安装工具链配置 环境 ubuntu22.04、 qemu9.0.0-rc1、cmake 3.25.2、python 3.8.10、dtc 1.5.0、west 1.2.0、zephyr-sdk-0.16.1 demo的模拟 首先先尝试一个可以正常跑起来…

C#学习笔记11:winform上位机与西门子PLC网口通信_下篇

今日终于到了winform上位机与西门子PLC网口通信的系列收为阶段了&#xff0c;一直没一口气更新完&#xff0c;手头上也没有可以测试用的PLC设备&#xff0c;虚拟仿真用到的博图软件也不想下载&#xff08;会让我电脑变卡&#xff09;。 于是等了些日子购买西门子PLC&#xff0…

软件测试的4个职业阶段,你在哪个阶段?

最近一直在忙的项目刚刚上线交付完成&#xff0c;让自己有了些许喘息的时间。人总是这样&#xff0c;在忙碌的时候&#xff0c;能心无旁骛关注并做好一件事&#xff0c;已是万幸。而全力而为之后的闲暇总是如此的珍贵&#xff0c;在这难得的空隙中&#xff0c;不自觉的开始对自…

自动化测试-如何优雅实现方法的依赖

在复杂的测试场景中&#xff0c;常常会存在用例依赖&#xff0c;以一个接口自动化平台为例&#xff0c;依赖关系&#xff1a; 创建用例 --> 创建模块 --> 创建项目 --> 登录。 用例依赖的问题 • 用例的依赖对于的执行顺序有严格的要求&#xff0c;比如让被依赖的方…

市面上加密混淆软件的比较和推荐

引言 市面上有许多加密混淆软件可供开发者使用&#xff0c;但哪些软件是最好用的&#xff1f;哪些软件受到开发者的喜爱&#xff1f;本文将根据一次在CSDN上的投票结果&#xff0c;为大家介绍几款在程序员中普及度较高的加密软件。以下是投票结果&#xff0c;希望能对大家的选择…

JSON数据格式讲解与cJSON库的使用

文章目录 写在前面一、安装cJSON二、使用cJSON1、使用的文件2、如何传输数据&#xff1a;**** 三、JSON语法四、cJSON函数讲解1、cJSON结构体 **2、cJSON结构体与字符串之间的转换&#xff08;重要&#xff09;2.1、标题将cJSON结构体转换为字符串(常用)2.2、将字符串转为cJSON…

看看《MATLAB科研绘图与学术图表绘制从入门到精通》示例:绘制山鸢尾萼片长度和萼片宽度的小提琴图

使用MATLAB绘制鸢尾花数据集&#xff08; fisheriris&#xff09;中山鸢尾&#xff08; Iris Setosa&#xff09;的萼片长度和 萼片宽度的小提琴图。这将帮助我们更好地了解山鸢尾的这两个特征的数据分布情况&#xff0c;包括它们的 中位数、四分位范围及密度估计。这种可视化工…

华为配置路由式Proxy ARP示例

配置路由式Proxy ARP示例 组网图形 图1 配置路由式Proxy ARP组网图 路由式Proxy ARP简介配置注意事项组网需求配置思路操作步骤配置文件 路由式Proxy ARP简介 企业内部进行子网划分时&#xff0c;可能会出现两个子网网络属于同一网段&#xff0c;但是却不属于同一物理网络的情…

C++ 类模板分文件编写

类模板分文件编写&#xff1a; 类模板成员函数 分文件编写 产生的问题以及解决方式是什么呢&#xff1f; 问题描述 类模板中**成员函数**创建时机是在**调用**阶段&#xff0c;导致分文件编写时**链接**不到 解决方案&#xff1a; 1、直接包含.cpp源文件&#xff1a; person…

【重磅更新】开源表单系统填鸭表单v5版发布!

亲爱的TDucker&#xff0c;你们好。 真诚感谢您对填鸭表单的关注与支持。今天我们将为您带来新版本的更新说明&#xff0c;以便您更好的使用我们的产品。 社区版版V5更新概览&#xff1a; ✅ 增加WebHook数据推送功能&#xff0c;集成TReport实现数据大屏展示。 ✅ 增加主题…

LeetCode-Java:303、304区域检索(前缀和)

文章目录 题目303、区域和检索&#xff08;数组不可变&#xff09;304、二维区域和检索&#xff08;矩阵不可变&#xff09; 解①303&#xff0c;一维前缀和②304&#xff0c;二维前缀和 算法前缀和一维前缀和二维前缀和 题目 303、区域和检索&#xff08;数组不可变&#xff…

DateTimeFormat 和 JsonFormat 应用场景详解

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

【javaWeb 第七篇】后端-Spring

Spring SpringspringBoot请求简单参数实体参数数组集合参数日期参数JSON参数路径参数 响应数据分层解耦三层架构解耦操作Bean的声明Bean组件扫描问题DI详解 Spring 详细介绍结合官网查看&#xff1a;https://spring.io/why-spring Spring发展到今天已经形成一种开发生态圈&…

覆盖最全面的学术论文写作的70类细节150+ChatGPT提示词

点击下方▼▼▼▼链接直达AIPaperPass &#xff01; AIPaperPass - AI论文写作指导平台 这篇文章小编介绍了专门为论文写作定制的ChatGPT提示词&#xff0c;旨在激发创造力并为你的论文提供独特的想法和见解。通过简单的短语或指令&#xff0c;你可以解锁ChatGPT AI模型的潜力…

激光车型识别仪:交通管理领域的技术革新与应用探索

激光车型识别仪&#xff1a;交通管理领域的技术革新与应用探索 在交通管理领域&#xff0c;随着技术的不断进步&#xff0c;各种智能化设备逐渐崭露头角。其中&#xff0c;激光车型识别仪作为一种基于激光技术的车辆识别设备&#xff0c;正以其高精度、强抗干扰能力等特点&…

JIT在汽车行业中的革命性应用:颠覆传统制造模式,引领智能制造新时代

随着科技的飞速发展和市场竞争的日益激烈&#xff0c;汽车行业正面临着前所未有的变革。其中&#xff0c;准时制生产&#xff08;Just-In-Time&#xff0c;简称JIT&#xff09;作为一种先进的生产管理方式&#xff0c;已经在汽车行业中得到了广泛应用&#xff0c;成为推动汽车产…

word文件的创建时间和修改时间可以更改吗?答案是肯定的 文件属性修改的方法

一&#xff0c;引言 在日常生活和工作中&#xff0c;我们经常需要处理各种Word文件。有时&#xff0c;由于某些原因&#xff0c;我们可能需要更改Word文件的创建时间和修改时间。虽然这听起来可能有些复杂&#xff0c;但实际上&#xff0c;通过一些简单的方法和工具&#xff0…

社区养老服务系统|基于springboot社区养老服务系统设计与实现(源码+数据库+文档)

社区养老服务系统目录 目录 基于springboot社区养老服务系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、管理员部分功能 &#xff08;1&#xff09; 用户管理 &#xff08;2&#xff09;服务种类管理 &#xff08;3&#xff09;社区服务管理 &#xff08…