axios获取本地json数据_ajax和axios请求本地json数据对比

AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

ajax请求本地json

test.json

{

"first":[

{"name":"王小婷","nick":"祈澈菇凉"},

{"name":"安安","nick":"坏兔子"},

{"name":"编程微刊","nick":"简书"}

]

}

代码:

$.ajax({

url: "ceshi.json", //json文件位置

type: "GET", //请求方式为get

dataType: "json", //返回数据格式为json

success: function(data) { //请求成功完成后要执行的方法

//each循环 使用$.each方法遍历返回的数据date

$.each(data.first, function(i, item) {

var str = '

姓名:' + item.name + '昵称:' + item.nick + '
';

document.write(str);

})

}

})

效果如下:

4b9cb79fedd5

图片.png

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端

1. 从浏览器制作XMLHttpRequests

2. 让HTTP从node.js的请求

3. 支持Promise API

4. 拦截请求和响应

5. 转换请求和响应数据

6. 取消请求

7. 自动转换为JSON数据

8. 客户端支持防止XSRF

axios请求本地json

相关依赖

安装

1:npm安装

npm install axios --save

2.在main.js下引用axios

import axios from 'axios'

一切环境依赖搭建好之后

下面来写个例子:axios请求本地json

1:在static文件夹底下新建json文件,( 本地JSON文件一定要需放在static文件夹之下。)

访问服务器文件,应该把 json文件放在最外层的static文件夹,这个文件夹是vue-cli内置服务器向外暴露的静态文件夹

4b9cb79fedd5

图片.png

2:test.json数据格式如下:

{

"first":[

{"name":"王小婷","nick":"祈澈菇凉"},

{"name":"安安","nick":"坏兔子"},

{"name":"编程微刊","nick":"简书"}

]

}

3:写一个axios

getData() {

axios.get('../../static/test.json').then(response => {

console.log(response.data);

}, response => {

console.log("error");

});

}

4:整体代码如下:

import axios from "axios";

export default {

name: "app",

data() {

return {

itemList: []

}

},

mounted() {

this.getData();

},

methods: {

getData() {

axios.get('../../static/test.json').then(response => {

console.log(response.data);

}, response => {

console.log("error");

});

}

}

}

5:前台显示:

4b9cb79fedd5

图片.png

区别总结

axios是通过promise实现对ajax技术的一种封装,就像jQuery实现ajax封装一样。

简单来说: ajax技术实现了网页的局部数据刷新,axios实现了对ajax的封装。

axios是ajax ajax不止axios

原文作者:祈澈姑娘

技术博客:https://www.jianshu.com/u/05f416aefbe1

90后前端妹子,爱编程,爱运营,爱折腾。

坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值