步骤 2 : 准备 json数据 步骤 3 : 通过 axions 获取数据
本来要开始讲解 Vue.js 里如何使用 Ajax了。 一般说来 Vue 不会直接使用原生的 Ajax 而是使用 ajax 框架。 而 axios.js 就是眼下比较流行的一种 ajax 框架
json 数据很简单,然后我把他放在:http://how2j.cn/study/json.txt 方便调用
{"name":"gareen","hp":"355"}
{"name":"gareen","hp":"355"}
如果要本地测试,可以在右上角下载 axios.min.js
<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>
<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>
HOW2J公众号,关注后实时获知最新的教程和优惠活动,谢谢。
问答区域
2021-06-19
这也写得太水了吧,前端这么传那后端该怎么接收呢,这个格式也太不优雅了吧
2019-07-05
如何跨域访问?
4 个答案
苦逼程序员 跳转到问题位置 答案时间:2021-06-02 如果只是为了做测试,直接自己本地建一个文本文件,然后改一下请求地址就行了
var url = "./json.txt"
齐天大圣 跳转到问题位置 答案时间:2020-10-11 下载安装一个vscode软件,在软件里搜索一个live-server插件,安装它。在vscode中编辑html文件,选中要打开的html文件,右键点击,选择Open with Live Server,可解决本地跨域问题。
java-c 跳转到问题位置 答案时间:2019-07-25 百度,上面的直接copy本地运行会产生跨域问题
海角 跳转到问题位置 答案时间:2019-07-24 同问
回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
2019-03-08
群里提问没人能解决,到这里来问问
2018-09-10
如果需要登陆之后才能获取资源,怎么弄个啊?
2018-08-16
带参数怎么传递到后台
提问太多,页面渲染太慢,为了加快渲染速度,本页最多只显示几条提问。还有 1 条以前的提问,请 点击查看
提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
|