Vue.js Ajax(axios) GET 方法笔记

最新推荐文章于 2023-11-09 14:24:34 发布

Z+924102832

最新推荐文章于 2023-11-09 14:24:34 发布

阅读量259

点赞数 1

分类专栏： Vue 文章标签： vue ajax js

本文链接：https://blog.csdn.net/qq_41135011/article/details/109466323

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue.js Ajax axiosGET 方法笔记

GET 方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<div id="app">
  <h1>网站列表</h1>
  <div
    v-for="site in info"
  >
	 {{info}}
    {{ site.name }}
  </div>
</div>
<script type = "text/javascript">
new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('https://www.runoob.com/try/ajax/json_demo.json')
      .then(response => (this.info = response))	//现在把代码写成response
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
  }
})
</script>
</body>

可以看到传来的都是JSON 数据。
在这里插入图片描述

现在代码改成只取data

this.info = response.data

在这里插入图片描述

最后代码改成只取sites键：

在这里插入图片描述
GET把参数包含在URL中，POST通过request body传递参数。

Z+924102832

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue.js Ajax(axios) GET 方法笔记

Vue.js Ajax axiosGET 方法笔记GET 方法<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例 - 菜鸟教程(runoob.com)</title><script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script><scr
复制链接

扫一扫