how2j.cn

步骤 1 : Ajax   
步骤 2 : 首先准备 json 数组   
步骤 3 : fetch.js 方式   
步骤 4 : axios.js 方式   

步骤 1 :

Ajax

Vue.js 并没有限制使用哪种方式进行 ajax 访问,所以可以使用如下方式
1. 原生 ajax
2. JQuery
3. vue-resource
4. fetch.js
5. axios.js

那么到底用哪种方式呢?

1. 原生一般不在项目中直接用
2. jquery 不如4,5方便
3. vue-resource 已经不再维护了,所以不推荐
4. fetch.js 是 vue.js 官方推荐
5. axios.js 是vue.js 官方推荐
步骤 2 :

首先准备 json 数组

json 数据很简单,然后我把它放在:http://how2j.cn/study/jsons.txt 方便调用
[ {"name":"gareen","hp":"355"}, {"name":"teemo","hp":"287"}, {"name":"annie","hp":"420"} ]
[
	{"name":"gareen","hp":"355"},
	{"name":"teemo","hp":"287"},
	{"name":"annie","hp":"420"}
]
步骤 3 :

fetch.js 方式

fetch 的调用就是前面 fetch 教程里讲解的。
新的知识点是在 mounted 的时候进行。 mounted 表示 Vue 对象加载成功了。

mounted:function(){ //mounted 表示这个 Vue 对象加载成功了
运行效果
<script src="http://how2j.cn/study/vue.min.js"></script> <script src="http://how2j.cn/study/fetch.min.js"></script> <head> <style> table tr td{ border:1px solid gray; } table{ border-collapse:collapse; width:300px; } tr.firstLine{ background-color: lightGray; } </style> </head> <div id="div1"> <table align="center" > <tr class="firstLine"> <td>name</td> <td>hp</td> </tr> <tr v-for="hero in heros"> <td>{{hero.name}}</td> <td>{{hero.hp}}</td> </tr> </table> </div> <script> var url = "http://how2j.cn/study/jsons.txt"; new Vue({ el:'#div1', data:{ heros:[] }, mounted:function(){ //mounted 表示这个 Vue 对象加载成功了 self=this fetch(url).then(function(response) { response.json().then(function (jsonObject) { self.heros = jsonObject }) }).catch(function(err){ console.log("Fetch错误:"+err); }) } }) </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 4 :

axios.js 方式

axios 的调用就是前面 axios 教程里讲解的。
新的知识点是在 mounted 的时候进行。 mounted 表示 Vue 对象加载成功了。

mounted:function(){ //mounted 表示这个 Vue 对象加载成功了
运行效果
<script src="http://how2j.cn/study/vue.min.js"></script> <script src="http://how2j.cn/study/axios.min.js"></script> <head> <style> table tr td{ border:1px solid gray; } table{ border-collapse:collapse; width:300px; } tr.firstLine{ background-color: lightGray; } </style> </head> <div id="div1"> <table align="center" > <tr class="firstLine"> <td>name</td> <td>hp</td> </tr> <tr v-for="hero in heros"> <td>{{hero.name}}</td> <td>{{hero.hp}}</td> </tr> </table> </div> <script> var url = "http://how2j.cn/study/jsons.txt"; new Vue({ el:'#div1', data:{ heros:[] }, mounted:function(){ //mounted 表示这个 Vue 对象加载成功了 var self = this axios.get(url).then(function(response) { self.heros= response.data; //此时还是字符串 self.heros = eval("("+self.heros+")"); //字符串转换为数组对象 }) } }) </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2018-07-25 ajax
西瓜胖子
带参数的ajax怎么写,没看见传参数到后台的写法




2 个答案

TZMMichael 答案时间:2018-07-29
额,,不能修改答案了,,, 我上面的$ajax是修改的 vue 对象的原型,添加了$ajax属性,指向的也是axios

TZMMichael 答案时间:2018-07-29
正常写就行




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2018-07-20 this问题
GaryLeeee



“var self = this“为什么要有这一步 直接this.heros就不会有数据
<script>
var url = "http://how2j.cn/study/jsons.txt";
new Vue({
    el:'#div1',
    data:{
        heros:[]
    },
    mounted:function(){ //mounted 表示这个 Vue 对象加载成功了
        var self = this
        axios.get(url).then(function(response) {
            self.heros= response.data; //此时还是字符串
            self.heros = eval("("+self.heros+")");  //字符串转换为数组对象
        })     
    }
})
</script>

							


2 个答案

ppy是大傻逼 答案时间:2018-07-23
因为对象有生命周期,前面的self=this的this是data,你后面的用的this会指向response的数据

seeyou123 答案时间:2018-07-20
同问 var self = this的意思




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到









提问之前请登陆
关于 前端部分-Vue.js-Ajax 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 902680467
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图