文章目录
- 前言
  
  一、axios的安装
  
  二.通过axios.get()方法获取json数据
  
  2.1下面的代码是通过axios.get()获取json数据
  
  2.2显示json数据
  
  总结

前言

今天学习了通过axios发送请求来获取json数据，下面分享下axios获取json数据的使用

一、axios的安装

在html中导入下面这行代码即可下载

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

二.通过axios.get()方法获取json数据

2.1下面的代码是通过axios.get()获取json数据

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {//定义一个变量来获取返回的json数据list:null},methods: {getMovies:function () {//在axios回调函数内部this是window，不是vue对象//定义局部变量that代替vue对象var that=this;//get("url") url是要请求的地址axios.get("http://localhost:3205/getMovies").then(function (resp){//resp是服务器的响应，里面存有json数据//json的数据存放在resp.data中that.list=resp.data;})}},//通过这个方法可以在页面渲染时自动的调用里边的方法mounted:function (){this.getMovies();}
})

json数据

2.2显示json数据

list中存放着json数据，可通过下边的代码进行简单的显示

<ul><li v-for="item in list">{{item}}</li>
</ul>

总结

通过axios可以将前端和后端链接起来，之前想要做一个看电影的网站，但是不知道怎么获取json数据，但是今天学到，将学到的方法分享给你们，希望后面我能完成这个电影网站。

vue通过axios获取json数据相关推荐

2021-11-03 vue笔记:反向代理介绍和使用场景,基于 vue-cli 的反向代理设置及 axios 获取 json 数据
文章目录 0.反向代理是什么? 1.正向代理(forward proxy) 2.反向代理(Reverse proxy) 1.为什么要配置反向代理? 2.如何实现vue中配置反向代理? 2.1.安装和引 ...
Vue中怎样获取json文件中的数据
场景访问百度音乐API需要传递音乐类型参数,而这些参数是存在musictype.json中, 现在在组件listcate.vue需要获取json数据. json文件内容: 文件位置: 实现 musi ...
axios获取html页面,axios 获取后台数据
什么是axios axios是一个获取后台数据的插件使用前提得安装node.js 页面直接引用下载选中文件夹 shift+右键调出命令窗口输入 npm i axios -g axios的特 ...
AngularJS学习笔记（3）——通过Ajax获取JSON数据
通过Ajax获取JSON数据以我之前写的与用户交互的动态清单列表为例,使用JSON前todo.html代码如下: <!DOCTYPE html> <html ng-app=&quo ...
dojo从asp.net中获取json数据
搞来有搞去终于有了个结果,主要是一开始犯了一些低级错误. 对于json不太了解的童鞋,可以看看这个:http://www.dreamdu.com/blog/2008/10/19/json_in_jav ...
Android Volley 库通过网络获取 JSON 数据
本文内容什么是 Volley 库 Volley 能做什么 Volley 架构环境演示 Volley 库通过网络获取 JSON 数据参考资料 Android 关于网络操作一般都会介绍 HttpC ...
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
1.jquery通过ajax方法获取json数据不执行success回调问题描述:jquery通过ajax方法获取json数据不执行success回调方法问题原因:json格式存在问题或不符合标准 ...
java $.getjson_JQuery 获取json数据$.getJSON方法的实例代码
jQuery系列第八章 jQuery框架Ajax模块第八章 jQuery框架Ajax模块 8.1 jQuery框架中的Ajax简介 Ajax技术的核心是XMLHTTPRequest对象,该对象是A ...
使用JSONP，jQuery的ajax跨域获取json数据
网上找了很多资料,写的不错,推荐下: 1.深入浅出JSONP--解决ajax跨域问题 (http://www.cnblogs.com/chopper/archive/2012/03/24/240394 ...

vue通过axios获取json数据

前言

一、axios的安装

二.通过axios.get()方法获取json数据

2.1下面的代码是通过axios.get()获取json数据

2.2显示json数据

总结

vue通过axios获取json数据相关推荐

最新文章

热门文章