【Ajax】笔记-Axios与函数发送AJAX请求

Axios 和 Ajax 的区别

1、Axios是一个基于Promise的HTTP库,而Ajax是对原生XHR的封装;
2、Ajax技术实现了局部数据的刷新,而Axios实现了对ajax的封装。

优缺点:

ajax:
本身是针对MVC的编程,不符合现在前端MVVM的浪潮
基于原生的XHR开发,XHR本身的架构不清晰,已经有了fetch的替代方案
JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常的不合理(采取个性化打包的方案又不能享受CDN服务
axios:
从 node.js 创建 http 请求
支持 Promise API
客户端支持防止CSRF
提供了一些并发请求的接口(重要,方便了很多的操作)

GET 请求

        // https://github.com/axios/axiosconst btns = document.querySelectorAll('button');//配置 baseURLaxios.defaults.baseURL = 'http://127.0.0.1:8000';btns[0].onclick = function () {//GET 请求axios.get('/axios-server', {//url 参数params: {id: 100,vip: 7},//请求头信息headers: {name: 'atguigu',age: 20}}).then(value => {console.log(value);});}

在这里插入图片描述

POST请求

        btns[1].onclick = function () {axios.post('/axios-server', {username: 'admin',password: 'admin'}, {//url params: {id: 200,vip: 9},//请求头参数headers: {height: 180,weight: 180,}});}

在这里插入图片描述

函数通用方法

btns[2].onclick = function(){axios({//请求方法method : 'POST',//urlurl: '/axios-server',//url参数params: {vip:10,level:30},//头信息headers: {a:100,b:200},//请求体参数data: {username: 'admin',password: 'admin'}}).then(response=>{//响应状态码console.log(response.status);//响应状态字符串console.log(response.statusText);//响应头信息console.log(response.headers);//响应体console.log(response.data);})}

在这里插入图片描述

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

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

相关文章

【MySQL】之复合查询

【MySQL】之复合查询 基本查询多表查询笛卡尔积自连接子查询单行子查询多行子查询多列子查询在from子句中使用子查询 合并查询小练习 基本查询 查询工资高于500或岗位为MANAGER的雇员,同时还要满足他们的姓名首字母为大写的J按照部门号升序而雇员的工资降序排序使用…

性能测试Ⅱ(压力测试与负载测试详解)

协议 性能理论:并发编程 ,系统调度,调度算法 监控 压力测试与负载测试的区别是什么? 负载测试 在被测系统上持续不断的增加压力,直到性能指标(响应时间等)超过预定指标或者某种资源(CPU&内存)使用已达到饱和状…

全志F1C200S嵌入式驱动开发(解决spi加载过慢的问题)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing @163.com】 之前的几个章节当中,我们陆续解决了spi-nor驱动的问题、uboot支持spi-nor的问题。按道理来说,下面要做的应该就是用uboot的loady命令把kernel、dtb、rootfs这些文件下载到ddr,然…

WebRTC Simulcast介绍

原文地址👇 https://blog.livekit.io/an-introduction-to-webrtc-simulcast-6c5f1f6402eb/ 你想知道的关于Simulcast的一切 Simulcast是WebRTC中最酷的功能之一,它允许WebRTC会议在参与者网络连接不可预测的情况下进行扩展。在这篇文章中,我们将深入探讨Simulcas…

欧姆龙CX系列PLC串口转以太网欧姆龙cp1hplc以太网连接电脑

你是否还在为工厂设备信息采集困难而烦恼?捷米特JM-ETH-CX转以太网通讯处理器为你解决这个问题! 捷米特JM-ETH-CX转以太网通讯处理器专门为满足工厂设备信息化需求而设计,可以用于欧姆龙多个系列PLC的太网数据采集,非常方便构建生…

4、非线性数据结构

上一节课我们讲了线性数据结构,这一节我们说下非线性数据结构。 非线性数据结构,从字面意思来看,就是指不是线性的结构。线性结构的特点是只有一个前驱和一个后继。 那么非线性结构的特点就是有多个前驱或后继了。 如果只存在一个没有前驱的…

ChatGPT是什么?ChatGPT里的G、P、T分别指什么

前言 ChatGPT是一种基于人工智能技术的聊天机器人,它可以模拟人们的对话方式进行自然语言交流,并根据用户提出的问题、需求、意愿等信息提供相关服务或回答问题。 ChatGPT的G、P、T分别指“生成式”(Generative)、“预训练”&…

买卖股票的最佳时机系列

//方法一 class Solution { public:int dp[100005];int maxProfit(vector<int>& prices) {//dp[i]表示前i天买入卖出的获取的最大利润//min_val表示前i-1天买入的最小值&#xff1b;dp[0]0;int min_valprices[0];for(int i1;i<prices.size();i){dp[i]max(dp[i-1],…

HikariCP连接池

HikariCP连接池 HikariCP连接池是高性能的JDBC连接池&#xff0c;官网标注的三大特点&#xff1a;快速、简单、可靠&#xff0c;性能优于其他连接池。 官网详细地说明了HikariCP所做的一些优化&#xff0c;总结如下&#xff1a; 字节码精简&#xff1a;优化代码&#xff0c;直…

Jsonp劫持

JSONP 介绍 jsonp是一种协议&#xff0c;准确的说&#xff0c;他是json的一种使用模式&#xff0c;为了解决Json受同源策略限制的问题。 基本语法 JSONP的基本语法为&#xff1a;callback({“name”:”test”, “msg”:”success”}) 常见的例子包括函数调用&#xff08;如…

mac怎么转换音频格式?

mac怎么转换音频格式&#xff1f;相信很多小伙伴都知道&#xff0c;平时我们接触到的音频格式大多是mp3格式的&#xff0c;因为mp3是电脑上最为流行的音频格式&#xff0c;不过除了mp3格式外&#xff0c;还有很多不同的音频格式&#xff0c;有时候不同网上或者不同软件上下载到…

Java开发中的分层开发和整洁架构

分层开发(横向拆分) 分层开发的概念: maven多模块开发项目管理.可以利用这种管理功能,实现一个项目的多层次模块开发–分层开发. 比如,当前项目HelloController依赖HelloService 这样做目的: 复杂开发过程.解耦(不调整依赖关系,无法解耦).分层开发(横向拆分)和纵向拆分的区别…

麒麟v10-coredns 启动失败

现象 在麒麟ARM芯片的机器上搭建k8s&#xff0c;其中的的一个组件cordons 发现启动失败&#xff0c;查看日志如下所示&#xff1a;No such device or address 问题分析 期初猜测kubelet与containerd的cgroupDriver驱动不一致导致。分别查看是一致的。没有问题。发现系统存在…

leetcode 1870. Minimum Speed to Arrive on Time(准时到达的最小速度)

需要找一个speed, 使得dist[i] / speed 加起来的时间 < hour, 而且如果前一个dist[i] / speed求出来的是小数&#xff0c;必须等到下一个整数时间才计算下一个。 speed最大不会超过107. 不存在speed满足条件时返回-1. 思路&#xff1a; 如果前一个dist[i] / speed求出来的…

vue-element-template管理模板(二)

vue-element-admin框架 动态路由&#xff08;二&#xff09; 修改代码&#xff1a; import { asyncRoutes, constantRoutes } from "/router"; import { getMenu } from "/api/user"; import Layout from "/layout";/*** Use meta.role to det…

C++第三方开发库matplotlib-cpp

Matplotlib-cpp是一个用于在C中绘制图表的开源库。它提供了与Python的Matplotlib库类似的功能&#xff0c;使得在C环境下进行数据可视化变得更加便捷。基于Matplotlib-cpp&#xff0c;我们可以使用各种绘图函数和样式选项来创建各种类型的图表&#xff0c;包括折线图、散点图、…

elementui全局给select option添加title属性

场景 有天边上的同事问了我一个问题&#xff0c;示例如下&#xff0c;有个数据特别长&#xff0c;导致下拉部分被横向撑大。希望在全局对所有的option进行处理&#xff0c;按照select的宽度&#xff0c;超出隐藏。 处理 方式一 第一眼看过去直接修改源码好了&#xff0c;修…

腾讯校园招聘技术类编程题汇总

题解&#xff1a;并查集&#xff08;模板&#xff09; #include <iostream> #include<map> using namespace std; int father[2000006]; int rank1[1000005]; void init(int n){for(int i1;i<1e5;i){father[i]i;rank1[i]1;} } int find(int x){if(father[x]x){…

Centos7 扩容(LVM 和非 LVM)

一、磁盘扩容方式 CentOS 系统的磁盘扩容可以分为两种方式&#xff1a;LVM 管理和非 LVM 管理。 LVM 管理的分区和传统分区方式是可以共存的。在同一个系统中&#xff0c;你可以同时使用 LVM 管理的分区和传统分区。 例如&#xff0c;在 CentOS 系统中&#xff0c;你可以选择将…