how2j.cn

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

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 数组

edit
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"}
]
fetch 的调用就是前面 fetch 教程里讲解的。
新的知识点是在 mounted 的时候进行。 mounted 表示 Vue 对象加载成功了。

mounted:function(){ //mounted 表示这个 Vue 对象加载成功了
运行效果
<script src="https://how2j.cn/study/vue.min.js"></script> <script src="https://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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
axios 的调用就是前面 axios 教程里讲解的。
新的知识点是在 mounted 的时候进行。 mounted 表示 Vue 对象加载成功了。

mounted:function(){ //mounted 表示这个 Vue 对象加载成功了
运行效果
<script src="https://how2j.cn/study/vue.min.js"></script> <script src="https://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公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2023-12-14 步骤 4 : axios.js 方式 中的 response.data 并不是字符串
Shu_Enryu




如题,站长在注释里写的,“现在还是字符串”。但自己看了以下,类型并不是string,而是object。 而且将response.data直接赋值给self.heroes可以照常运行。并不需要将它用eval解析。
加载中
<style>
    table{
        border-collapse: collapse;
    }
    td{
        border: 1px solid black;
        width: 100px;
    }
    tr:first-child{
        background-color: lightgray;
    }
</style>
<html>
    <head>
        <script src="vue.min.js"></script>
        <script src="axios.min.js"></script>
    </head>
    <body>
        <table id="t">
            <tr>
                <td>name: </td>
                <td>hp: </td>
            </tr>
            <tr v-for="hero in heroes">
                <td>{{hero.name}}</td>
                <td>{{hero.hp}}</td>
            </tr>
        </table>

    </body>
</html>
<script>
    var url = "jsons.txt"
    new Vue({
        el: "#t"
        , data: {
            heroes: []
        }
        , mounted: function(){
            var self = this;
            axios.get(url).then(function(response){
                 
                self.heroes = response.data;
                console.log(typeof(response.data));
            });
        }
    });
</script>

							





回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2021-11-23 原因:CORS 请求未能成功
渴死的比目鱼




我这边直接出现这个问题,还请如何解决? 已拦截跨源请求:同源策略禁止读取位于 http://how2j.cn/study/jsons.txt 的远程资源。(原因:CORS 请求未能成功)。
<script src="https://how2j.cn/study/axios.min.js"></script>
  
<div id="hero">
  
</div>
  
<script>
var url = "http://how2j.cn/study/json.txt"
    axios.get(url).then(function(response) {
        var jsonObject = response.data;
        var jsonString = JSON.stringify(jsonObject)
        document.getElementById("hero").innerHTML = "通过 axios 获取到的json数据:"+ jsonString;
    })
  
</script>

							





回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2021-04-23 复制过去eclipse运行不了
2020-03-21 不知怎地未能成功运行加载结果
2019-12-04 axios原写法报错


提问太多,页面渲染太慢,为了加快渲染速度,本页最多只显示几条提问。还有 6 条以前的提问,请 点击查看

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-Vue.js-Ajax 的提问

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

上传截图