ajax和axios请求本地json数据对比
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
ajax请求本地json
test.json { "first":[ {"name":"王小婷","nick":"祈澈菇凉"}, {"name":"安安","nick":"坏兔子"}, {"name":"编程微刊","nick":"简书"} ] }
代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <script> $.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 = '<div>姓名:' + item.name + '昵称:' + item.nick + '</div>'; document.write(str); }) } }) </script> </html>
效果如下:
![5640239-f67a255d45740146.png](https://upload-images.jianshu.io/upload_images/5640239-f67a255d45740146.png)
图片.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内置服务器向外暴露的静态文件夹
![5640239-d1654f8830367e38.png](https://upload-images.jianshu.io/upload_images/5640239-d1654f8830367e38.png)
图片.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:整体代码如下:
<template> <div id="app"> </div> </template> <script> 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"); }); } } } </script>
5:前台显示:
![5640239-fa70884b20f307e7.png](https://upload-images.jianshu.io/upload_images/5640239-fa70884b20f307e7.png)
图片.png
区别总结
axios是通过promise实现对ajax技术的一种封装,就像jQuery实现ajax封装一样。
简单来说: ajax技术实现了网页的局部数据刷新,axios实现了对ajax的封装。