首页 前端知识 110 使用jQuery和axios实现Ajax

110 使用jQuery和axios实现Ajax

2024-05-31 20:05:15 前端知识 前端哥 421 437 我要收藏

文章目录

  • 1、使用jQuery实现ajax
  • 2、使用axios实现ajax

准备:
访问 http://www.tianqiapi.com/api?version=v9&appid=23035354&appsecret=8YvlPNrz,查看数据,如下:
在这里插入图片描述
上述数据不方便查看,安装 JSONView或使用在线 JSONViewhttp://www.ab173.com/json/jsonviewernew.php)查看。
在这里插入图片描述
访问上述接口,获取数据。

1、使用jQuery实现ajax

引入jquery库。

<script src="libs/jquery-3.6.0/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>

在这里插入图片描述
在这里插入图片描述
效果如下:
在这里插入图片描述

2、使用axios实现ajax

Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

axioshttp://www.axios-js.com/zh-cn/docs/https://www.axios-http.cn/docs/intro

引入axios

<script src="libs/axios/axios.min.js" type="text/javascript" charset="utf-8"></script>

在这里插入图片描述
效果如下:
在这里插入图片描述
jQueryaxios实现ajax返回的数据不一样,jQuery直接返回的数据,而axios返回的数据是一个对象,res.data才是服务器端真正返回的内容,除了res.data外还有状态码、状态文本等其他数据。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10284.html
标签
评论
发布的文章

npmjs官网(查询依赖包)

2024-06-07 00:06:56

npx使用及原理

2024-06-07 00:06:36

npm 包管理工具

2024-06-07 00:06:33

vue 思极地图开发

2024-06-07 00:06:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!