Ajax、axios使用方法

已于 2023-06-21 14:25:53 修改
阅读量93 收藏
点赞数
文章标签： ajax 前端 javascript
于 2023-06-08 08:25:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hey_Join/article/details/131099923
版权

Ajax的使用

1.

xmlHttpRequest.open(‘GET/POST’,url),其中get是用于请求，Post是用于提交

Axios的使用（在ajax的基础上进行了一层封装）在这里插入图片描述

axios的get和post方法都可以传递json对象，但是两者的使用方法不一样

POST在这里插入图片描述 传递到后端的是json对象，如果想封装给具体对象可以在对应参数前加上@Requestbody
例：public ResponseEntity createUser(@RequestBody User user)//将传过来的json对象的属性值赋给user对应的属性

GET在这里插入图片描述

为了简写，可以使用以下方法
在这里插入图片描述

get方式的有参简写
axios.get('url',{params:{id:1,name="张三"}}).then((res)=>{ })

post方式的简写
axios.post('url',"name=zhangsan&age=10").then((res)=>{ })

ajax与axios都是对json对象的操作，且ajax与axios都属于vue

Hey_米氏胡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react 使用ajax axios,react中使用Ajax请求（axios，Fetch）
weixin_42515841的博客
08-06 1232
React本身只关注于界面, 并不包含发送ajax请求的代码，前端应用需要通过ajax请求与后台进行交互(json数据)，可以使用集成第三方ajax库(或自己封装)常用的ajax请求库jQuery: 比较重, 如果需要另外引入不建议使用axios: 轻量级, 建议使用，封装XmlHttpRequest对象的ajax，promise风格，可以用在浏览器端和node服务器端fetch: 原生函数, 但...
在Vue组件化中利用axios处理ajax请求的使用方法
12-08
本文主要给大家介绍了关于在Vue组件化中利用axios处理ajax请求的使用方法，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。 推荐方式 首先在 main.js 中引入 axios // 引入 axios import ...
python的post get请求返回json数据
mingyuexingzuo的博客
12-03 5214
python的post请求跟get请求，引用requests的库，一般新手默认返回都会.text，这里我也是这样操作的，然后如果返回的是json格式数据，在去取出想要的数据。 这里就会多操作一步，严格意义来讲还是比较麻烦的。python 直接给我们封好了一个返回定义 .json。 对request发起请求返回的响应对象进行.json()操作，.json操作返回的是一个字典类型（如果返回的结果为空时则会报错）。这样我们发送请求返回的数据直接就是 字典格式类型，可以直接取你想要的数据，比较方便操作，小知
AJAX和axios的基本使用
weixin_50769390的博客
11-06 2667
Ajax 和 axios 的基本使用
axios使用方法
Mr-yang的随笔
07-15 4659
1、基本用法 安装 cnpm i axios --save 在 main.js 中引入 axios import axios from 'axios' Vue.prototype.$axios = axios 在组件中使用 axios <script> export default { mounted(){ this.$axios.get('/goods.json').then(res=>{ console.log(res.data); }) } } &
Axios使用方法详解，从入门到进阶
热门推荐
青春木鱼的博客
08-16 3万+
Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js中。Axios（相比于原生的XMLHttpRequest对象来说） 简单易用,（相比于jQuery）axios包尺寸小且提供了易于扩展的接口，是专注于网络请求的库。
ajax和axios的使用和区别
Caleb的博客
05-21 584
Ajax与Axios 一、概述 1.1 浏览器发送的请求类型 1.1.1 同步请求 同步请求的特点： 按照代码顺序依次发起； 一个请求未得到响应时，后续请求会被阻塞。 同步发起方式 在地址栏输入URL：同步的get请求。 的ref：同步的get请求。 带有src：同步的get请求。 ：同步的get|post请求。 1.1.2 异步请求 发起方式： js代码发起 发起异步请求的工具： XmlHttpRequest对象。 异步请求的特点： 创建一个新线程发起请求，获取响应； 在
ajax与axios基本使用
weixin_51169222的博客
11-15 529
ajax的基本使用 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <button type="button">点击发送请求</button> <div id="result"> </div> </body> <script type="text/javascript"&
Axios使用方法
singularity（奇点）
03-29 2万+
axios简介 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 axios的优势： 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御 XSRF axios的基本使用 如何引入axios 可以通过npm安装来进行使用 $ npm install axio 也可以使用 bower进行安装，然后在页
ajax和axios基本理解
qq_48349120的博客
12-07 2108
同步和异步 同步：必须等待前面的任务完成，才能继续后面的任务 异步不受当前任务的影响 异步更新网站： 1.我们在访问一个普通的网站时，当浏览器加载完HTML、CSS、JS以后，网站的内容就固定了。如果想让网站内容发生更改，就必须刷新页面才能够看到更新的内容。 2可如果用到异步更新，情况就大为改观了。比如，我们在访问新浪微博时，看到一大半了，点击底部的加载更多，会自动帮我们加载更多的微博，同时页面并没有刷新。 3.试想一下，如果没有异步刷新的话，每次点击“加载更多”，网页都要刷新，体验就太不好了。 web前
vue ajax axios6,vue全局使用axios插件请求ajax
weixin_39737111的博客
08-06 413
vue全局使用axios插件请求ajaxVue 原本有一个官方推荐的 ajax 插件 vue-resource，但是自从 Vue 更新到 2.0 之后，官方宣布停止更新vue-resource，并推荐大家使用axios，越来越多的 Vue 项目，都选择 axios 来完成 ajax 请求，而大型项目会使用 Vuex 来管理数据。之前一直使用的是 vue-resource插件，在主入口文件引入imp...
ajax axios.get axios.post 方法 聊天机器人前后端交互
04-17
聊天机器人前后端交互 ajax学习
Vue官方推荐AJAX组件axios.js使用方法详解与API
12-12
Axios.js作为Vue官方插件的AJAX组件其主要有以下几个特点： 1、比Jquery轻量，但处理请求不多的时候，可以使用 2、基于Promise语法标准 3、支持nodejs 4、自动转换JSON数据 Axios.js用法 axios提供了一下几种请求...
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
10-17
今天小编就为大家分享一篇vue项目使用axios发送请求让ajax请求头部携带cookie的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 组件的封装之基于axios的ajax请求方法
10-18
在本篇内容中，我们将探讨如何在Vue组件中封装基于axios的Ajax请求方法，以便更高效、统一地处理网络请求。 首先，让我们了解下axios。Axios是一个基于Promise的HTTP库，它可以在浏览器和Node.js中使用。它提供了...
摸鱼大数据——Spark基础——Spark On Yarn环境配置和部署
最新发布
weixin_65694308的博客
07-02 783
export/data/spark_project/spark_base/05_词频统计案例_spark_on_yarn运行.py。/export/data/spark_project/spark_base/05_词频统计案例_spark_on_yarn运行.py。/export/data/spark_project/spark_base/05_词频统计案例_spark_on_yarn运行.py。相比原理hadoop集群,需要多启动一个spark的自己的历史服务,它是依赖hadoop的历史服务的!
【ajax实战09】内容管理页面——删除功能
大前端开发工程师、互联网方向创业者
06-28 369
利用ajax实现数据删除功能
前端面试题（12）答案版
weixin_49062485的博客
06-30 763
在不同的操作系统上,设置环境变量的方式有所不同,比如在Windows上使用set命令,在Unix/Linux上使用export命令。-2） setImmediate：是Node.js中的特有API,属于微任务,会被添加到微任务队列中,在事件循环的微任务阶段执行。2) 执行完所有宏任务后,检查微任务队列(如Promise.then)是否有待执行的任务,依次执行。- 1）setTimeout：是宏任务,会被添加到宏任务队列中,在事件循环的宏任务阶段执行。在前端面试中,考察这些基本概念是非常常见的。
探索WebKit的插件帝国：深入插件系统的奥秘
2401_85763803的博客
06-30 529
WebKit的插件系统允许第三方开发者扩展浏览器的功能。插件可以拦截网页中的特定资源请求，执行自定义的代码，并以各种形式与用户交互。通过本文的深入探讨，你现在应该对WebKit的插件系统有了全面的理解。从插件的创建到生命周期管理，再到性能优化和安全性考虑，本文提供了一个全面的指南。WebKit插件系统的强大功能，为开发者提供了广阔的创新空间。
ajax axios
08-11
ajax和axios都是用于发送网络请求的技术，但它们之间有一些区别。ajax是一种基于XMLHttpRequest对象的技术，通过使用回调函数来处理请求的结果。而axios是一个基于Promise的封装库，它提供了简化发送请求的方法，不需要设置回调函数，而是可以直接使用then方法处理返回的数据。axios还具有一些其他特性，例如支持拦截请求和响应、自动转换响应为JSON格式、提供并发请求等。 另外，需要注意的是fetch也是一种用于发送网络请求的技术，它是在ES6中出现的，并使用了Promise对象。与ajax和axios不同的是，fetch是原生的JavaScript技术，不使用XMLHttpRequest对象。 总结来说，ajax是一种基于XMLHttpRequest对象的技术，axios是对ajax的封装，并使用Promise实现。fetch是原生的JavaScript技术，使用了ES6中的Promise对象。123 #### 引用[.reference_title] - *1* [Axios和Ajax的区别是什么](https://blog.csdn.net/qq_45037155/article/details/126829429)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item] - *2* [ajax和axios](https://blog.csdn.net/qq_48973567/article/details/127830858)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item] - *3* [ajax与axios](https://blog.csdn.net/qq_43392573/article/details/115964531)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值