|
|
|
步骤 2 : 准备 json数据 步骤 3 : 通过 fetch 获取数据
本来要开始讲解 Vue.js 里如何使用 Ajax了。 一般说来 Vue 不会直接使用原生的 Ajax 而是使用 ajax 框架。 而 fetch.js 就是眼下比较流行的一种 ajax 框架
json 数据很简单，然后我把他放在：http://how2j.cn/study/json.txt 方便调用
{"name":"gareen","hp":"355"}
{"name":"gareen","hp":"355"}
如果要本地测试，可以在右上角下载 fetch.min.js
<script src="https://how2j.cn/study/fetch.min.js"></script>
<div id="hero">
</div>
<script>
var url = "http://how2j.cn/study/json.txt"
fetch(url).then(function(response) {
response.json().then(function (jsonObject) {
var jsonString = JSON.stringify(jsonObject)
document.getElementById("hero").innerHTML = "通过fetch获取到的json数据："+ jsonString;
})
}).catch(function(err){
console.log("Fetch错误:"+err);
})
</script>
<script src="https://how2j.cn/study/fetch.min.js"></script>
<div id="hero">
</div>
<script>
var url = "http://how2j.cn/study/json.txt"
fetch(url).then(function(response) {
response.json().then(function (jsonObject) {
var jsonString = JSON.stringify(jsonObject)
document.getElementById("hero").innerHTML = "通过fetch获取到的json数据："+ jsonString;
})
}).catch(function(err){
console.log("Fetch错误:"+err);
})
</script>
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2022-11-13
项目启动后，用浏览器打开即可
2021-09-26
关于结果未显示的问题
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2021-06-09
示例显示也是空白，我运行起来结果也是空白，但是空白是对的吗？
2020-07-16
为什么我的catch会报错，你们怎么导入那个fetch.js 的
2020-03-31
内容是不是太少了，有些代码没有解释 看的不是很懂，一直百度 。
提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 6 条以前的提问，请 点击查看
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
|||||||||||||
