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>
效果如下:
图片.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内置服务器向外暴露的静态文件夹
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:前台显示:
区别总结
axios是通过promise实现对ajax技术的一种封装,就像jQuery实现ajax封装一样。
简单来说: ajax技术实现了网页的局部数据刷新,axios实现了对ajax的封装。
axios是ajax ajax不止axios
原文作者:祈澈姑娘
技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。
ajax和axios请求本地json数据对比的更多相关文章
- 【VueJS】VueJS开发请求本地json数据的配置
VueJS开发请求本地json数据的配置,旧版本是build/dev-server.js,新版本是build/webpack.dev.conf.js. VueJS开发请求本地json数据的配置,早期的 ...
- 手把手教你vue配置请求本地json数据
本篇文章主要介绍了vue配置请求本地json数据的方法,分享给大家,具体如下:在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require ...
- vue配置 请求本地json数据
第一步:在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require('portfinder')后添加 //第一步const expres ...
- vue+axios访问本地json数据踩坑点
当我们想在vue项目中模拟后台接口访问json数据时,我们发现无论如何也访问不到本地的json数据. 注意:1.在vue-cli项目中,我们静态资源只能放在static文件夹中,axios使用get请 ...
- 使用axios获取本地json数据
1. 通过搜索 网上说不放在static文件夹中会报错 但是一直报错 放到根目录下的时候不报错了 2. 在main.js中引入axios import axios from 'axios' 3. ...
- axios请求本地json
在vux的项目中 1,首先,json文件的位置: 原因: 访问服务器文件,应该把 json文件放在最外层的static文件夹,这个文件夹是vue-cli内置服务器向外暴露的静态文件夹 2,一定要用 ...
- vue请求本地json数据
1.下载vue-resource插件 cnpm install vue-resource 1.2全局引入vue-resource: 在main.js import VueResource from ' ...
- vue使用axios请求本地json文件出现404
之前的路径是这么写的,一直出现404,后来发现必须是http的才可以,这样是无法请求的 把路径改为以下 位置根据json文件决定,但是必须是http://localhost:断口号
- 【Spring学习笔记-MVC-5】利用spring MVC框架,实现ajax异步请求以及json数据的返回
作者:ssslinppp 时间:2015年5月26日 15:32:51 1. 摘要 本文讲解如何利用spring MVC框架,实现ajax异步请求以及json数据的返回. Spring MV ...
随机推荐
- select多选 multiple的使用
select多选 multiple的使用 <html> <head> <script type="text/javascript"> func ...
- FPGA静态时序分析——IO口时序(Input Delay /output Delay)
1.1 概述 在高速系统中FPGA时序约束不止包括内部时钟约束,还应包括完整的IO时序约束和时序例外约束才能实现PCB板级的时序收敛.因此,FPGA时序约束中IO口时序约束也是一个重点.只有约束正确 ...
- bzoj1934: [Shoi2007]Vote 善意的投票(显然最小割)
1934: [Shoi2007]Vote 善意的投票 题目:传送门 题解: 明显的不能再明显的最小割... st连同意的,不同意的连ed 朋友之间两两连边(即双向边) 流量都为1... 为啥: 一个人 ...
- Nginx下部署Laravel项目
Nginx下部署Laravel项目 标签(空格分隔): php Nginx配置文件 listen 80 default_server; #listen [::]:80 default_server i ...
- ubuntu创建文件夹桌面快捷方式
最近在使用dropbox,用来存储一些自己的markdown笔记和pdf文件.觉得放一个快捷方式在桌面上比较方便,但是lxde似乎没有直接创建桌面快捷方式的功能(或者是我没有找到),就上网查了一下,顺 ...
- caffe(2) 数据层及参数
要运行caffe,需要先创建一个模型(model),如比较常用的Lenet,Alex等, 而一个模型由多个屋(layer)构成,每一屋又由许多参数组成.所有的参数都定义在caffe.proto这个文件 ...
- 从Chrome源码看audio/video流媒体实现一(转)
现在绝大多数的网站已经从flash播放器转向了浏览器原生的audio/video播放器,浏览器是如何加载和解析多媒体资源的,这对于web开发者来说是一个黑盒,所以很有必要看一下浏览器是怎么实现的,Ch ...
- users---显示当前登录系统的所有用户的用户列表
users命令用于显示当前登录系统的所有用户的用户列表.每个显示的用户名对应一个登录会话.如果一个用户有不止一个登录会话,那他的用户名将显示相同的次数. 语法 users(选项) 选项 --help: ...
- poi导出excel缩放比例的问题
某次修改了一下controller里导出清单的表格格式之后,就发现一直有这个问题,今天把手头的活都处理完了就在找问题出在哪,好在导出清单的格式写在了两个controller里,对照一比较发现了问题,s ...
- CSU 1374 Restore Calculation 数位DP
题意: 给你三个数A, B, C(没有前导0),但是其中某些位不知道. 问A+B=C成立有多少种情况. 思路: 从最后一位往前推,枚举A, B的每一种情况,考虑进位和不进位两种情况. 代码: #inc ...