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.hqwc.cn/news/624696.html

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

相关文章

使用undetected-chromedriver遇到的问题及解决方法,以及它使用SOCKS代理的问题

环境&#xff1a;python3.8.10 uc的安装方法&#xff1a; pip38 install undetected-chromedriver 上测试代码&#xff1a; import undetected_chromedriver as uc driver uc.Chrome() driver.get(https://www.baidu.com) driver.save_screenshot(baidu.png)报错&#xff…

Java项目如何使用EasyExcel插件对Excel数据进行导入导出

文章目录 一、EasyExcel的示例导入依赖创建实体类数据导入和导出 二、EasyExcel的作用三、EasyExcel的注解 EasyExcel是一个阿里巴巴开源的excel处理框架&#xff0c;它以使用简单、节省内存著称。在解析Excel时&#xff0c;EasyExcel没有将文件数据一次性全部加载到内存中&…

权限管理Ranger详解

文章目录 一、Ranger概述与安装1、Ranger概述1.1 Ranger介绍1.2 Ranger的目标1.3 Ranger支持的框架1.4 Ranger的架构1.5 Ranger的工作原理 2、Ranger安装2.1 创建系统用户和Kerberos主体2.2 数据库环境准备2.3 安装RangerAdmin2.4 启动RangerAdmin 二、Ranger简单使用1、安装 R…

python之flask安装以及使用

1 flask介绍 Flask是一个非常小的Python Web框架&#xff0c;被称为微型框架&#xff1b;只提供了一个稳健的核心&#xff0c;其他功能全部是通过扩展实现的&#xff1b;意思就是我们可以根据项目的需要量身定制&#xff0c;也意味着我们需要学习各种扩展库的使用。 2 python…

基于Echarts的超市销售可视化分析系统(数据+程序+论文

本论文旨在研究Python技术和ECharts可视化技术在超市销售数据分析系统中的应用。本系统通过对超市销售数据进行分析和可视化展示&#xff0c;帮助决策层更好地了解销售情况和趋势&#xff0c;进而做出更有针对性的决策。本系统主要包括数据处理、数据可视化和系统测试三个模块。…

Rust腐蚀服务器清档多教程

Rust腐蚀服务器清档多教程 大家好我是艾西&#xff0c;一个做服务器租用的网络架构师。上期教了大家怎么搭建服务器以及安装插件等那么随着大家自己架设服或是玩耍的时间肯定会有小伙伴想要去新增开区数量或是把原本的服务器进行一些调整等&#xff0c;那么今天主要聊的就是怎…

PTA图论的搜索题

目录 7-1 列出连通集 题目 输入格式: 输出格式: 输入样例: 输出样例: AC代码 7-2 六度空间 题目 输入格式: 输出格式: 输入样例: 输出样例: 思路 AC代码 7-3 地下迷宫探索 题目 输入格式: 输出格式: 输入样例1: 输出样例1: 输入样例2: 输出样例2: 思路 …

Flask Web 应用与 MongoDB 集成:用户登录和退出

在本文中&#xff0c;我们将探讨如何使用 Flask Web 框架和 MongoDB 数据库构建一个简单的 Web 应用。我们将使用 Flask-PyMongo 扩展来实现 MongoDB 集成&#xff0c;并使用 Flask-Login 扩展来处理用户认证。 1. 安装所需库 首先&#xff0c;我们需要安装 Flask、Flask-PyM…

在Qt中如何简单设计一个文件和图像浏览器

文本浏览器 设计一个文本浏览器程序&#xff0c;可以打开、显示 txt、html等文件。 1.在Qt Designer中设计一个菜单其中包含打开和退出选项&#xff1a; 2. 在 QMainWindow 构造函数中把 textBrower 设为主窗口的中心部件&#xff0c;这样整个窗口就成了包含 textBrower 的单文…

知道XRD标准品PDF卡片号,如何直接导出标准物质数据,简单快速一分钟完成(附jade下载安装方法)

知道XRD标准品PDF卡片号&#xff0c;如何直接导出标准物质数据&#xff08;附jade下载安装方法&#xff09; 网上找到的方法都是先检索再导出&#xff0c;我的样品根本检索不到&#xff0c;但是根据参考文献知道了自己的pdf卡片号&#xff0c;可通过jade直接导出数据 1.请安装…

WPF Extended.Wpf.Toolkit 加载界面

1、NuGet 中安装 Extended.Wpf.Toolkit 。 2、在MainWindow.xaml中添加xmlns:tk"http://schemas.xceed.com/wpf/xaml/toolkit" 。 MainWindow.xaml 代码如下。 <Window x:Class"WPF_Extended_Wpf_Toolkit_Loading.MainWindow" xmlns"ht…

如何把npm切换成yarn管理项目

1.删掉项目中package-lock.json和依赖包 这一步手动删掉就好 2.全局安装yarn npm install -g yarn 3.可以开始执行yarn install安装依赖 1&#xff09;执行yarn init 这一步是修改npm生成的package.json文件&#xff0c;可能会遇到这个问题&#xff1a; 这个查了一下是有…