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数据对比的更多相关文章

  1. 【VueJS】VueJS开发请求本地json数据的配置

    VueJS开发请求本地json数据的配置,旧版本是build/dev-server.js,新版本是build/webpack.dev.conf.js. VueJS开发请求本地json数据的配置,早期的 ...

  2. 手把手教你vue配置请求本地json数据

    本篇文章主要介绍了vue配置请求本地json数据的方法,分享给大家,具体如下:在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require ...

  3. vue配置 请求本地json数据

    第一步:在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require('portfinder')后添加 //第一步const expres ...

  4. vue+axios访问本地json数据踩坑点

    当我们想在vue项目中模拟后台接口访问json数据时,我们发现无论如何也访问不到本地的json数据. 注意:1.在vue-cli项目中,我们静态资源只能放在static文件夹中,axios使用get请 ...

  5. 使用axios获取本地json数据

    1. 通过搜索 网上说不放在static文件夹中会报错  但是一直报错  放到根目录下的时候不报错了 2. 在main.js中引入axios import axios from 'axios' 3. ...

  6. axios请求本地json

    在vux的项目中 1,首先,json文件的位置: 原因: 访问服务器文件,应该把 json文件放在最外层的static文件夹,这个文件夹是vue-cli内置服务器向外暴露的静态文件夹   2,一定要用 ...

  7. vue请求本地json数据

    1.下载vue-resource插件 cnpm install vue-resource 1.2全局引入vue-resource: 在main.js import VueResource from ' ...

  8. vue使用axios请求本地json文件出现404

    之前的路径是这么写的,一直出现404,后来发现必须是http的才可以,这样是无法请求的 把路径改为以下   位置根据json文件决定,但是必须是http://localhost:断口号

  9. 【Spring学习笔记-MVC-5】利用spring MVC框架，实现ajax异步请求以及json数据的返回

    作者:ssslinppp      时间:2015年5月26日 15:32:51 1. 摘要 本文讲解如何利用spring MVC框架,实现ajax异步请求以及json数据的返回. Spring MV ...

随机推荐

  1. 移动端页面弹出对话框效果Demo

    核心思路:设置一个隐藏的(display:none;).背景偏暗的div及其子div作为对话框.当点击某处时,将此div设置为显示. 核心代码例如以下(部分js代码用于动态调整div内容的行高.这部分 ...

  2. cocos2d-x 粒子效果

    大规模运动的物体通常有两种方法实现 1.使用帧动画来模拟 2,粒子效果 粒子系统有CCParticleSystem类实现,CCParticleSystem实现了对粒子的控制与调度,对粒子的操作包含: ...

  3. JAVA学习第二十七课（多线程（六））- 多生产者多消费者问题（JDK1.5新特性）

    多生产者多消费者问题 以生产馒头 消费馒头为例. class Resource { private String name; private int count = 1; private boolea ...

  4. Experience Design for Sexable Forum

    Mars March 16, 2015

  5. 【递推DP】POJ1163The Triangle

    题目链接:http://poj.org/problem?id=1163 事实上这个题目有非常多解法,可是我们能够看下这个用一位数组的高效动规解法,这个我上课时老师讲的,非常不错. 先保存最后一行4 5 ...

  6. mongodb E11000 duplicate key error collection: index: _id_ dup key

    今天在单测的时候,出现这个问题. 我代码只定义了一个变量 let body = {name: 'wu'} 然后连续2次插入这个body数据 await exam.insertExam(body); a ...

  7. [BZOJ3884] 上帝与集合的正确用法 (欧拉函数)

    题目链接:  https://www.lydsy.com/JudgeOnline/problem.php?id=3884 题目大意: 给出 M, 求 $2^{2^{2^{2^{...}}}}$ % M ...

  8. WEB前端开发工程师成长计划

    今天看到一篇文章,感觉很不错,于是转了过来,同时也给自己规划一个方向. [背景] 如果你是刚进入web前端研发领域,想试试这潭水有多深,看这篇文章吧:如果你是做了两三年web产品前端研发,迷茫找不着提 ...

  9. js确认框confirm()用法实例详解

    先为大家介绍javascript确认框的三种使用方法,具体内容如下 第一种方法:挺好用的,确认以后才能打开下载地址页面.原理也比较清晰.主要用于删除单条信息确认. ? 1 2 3 4 5 6 7 8 ...

  10. UNIX 是什么？怎么诞生的？

    要记住, 当一扇门在你面前关闭的时候, 另一扇门就会打开. 肯·汤普森(Ken Thompson) 和丹尼斯·里奇(Dennis Richie)两个人就是这句名言很好的实例.他们俩是20世纪最优秀的信 ...