经验教程

ajax和axios请求本地json数据

悠悠楠杉

2019-12-17

0 评论

733 阅读

正在检测是否收录...

12/17

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

ajax请求本地json

test.json
{
    "data":[
        {"id":"1","nick":"濮阳南风"},
        {"id":"2","nick":"茅云蔚"},
        {"id":"3","nick":"箕建"},
        {"id":"4","nick":"表振"},
        {"id":"5","nick":"鞠腾骏"}
    ]
}

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="box"></div>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
        $.ajax({
            url: "test.json", //json文件位置
            type: "get", //请求方式为get
            dataType: "json", //返回数据格式为json
            success: function(ret) { //请求成功完成后要执行的方法 
                var str = '';
                for (var i in ret.data) {//使用for in遍历数据
                   str += '<div>'+ret.data[i].id+'、昵称：'+ret.data[i].nick+'</div>';
                }
                $('.box').html(str);

            }
        })
    </script>
</body>
</html>

遍历数据也可以使用$.each方法遍历

var str = '';
$.each(ret.data, function(i,item) {
   str += '<div>'+item.id+'、昵称：'+item.nick+'</div>';
})
$('.box').html(str);

如果是获取一条数据，不用循环的，可以直接获取，比如ret.data.ip，或者也可以用$.parseJSON获取

{"code":"200","msg":"success","data":{"ip":"220.181.38.148","city":"北京市","area":"电信互联网数据中心"}}

代码：

var strJson = JSON.stringify(ret); 
var data = $.parseJSON(strJson);
var str = '<div><span>'+data.data.city+'</span>&nbsp;<span>'+data.data.area+'</span><br><span>'+data.data.ip+'</span></div>';
$('.box').html(str);

效果如下：

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数据格式如下：

{
    "data":[
        {"id":"1","nick":"濮阳南风"},
        {"id":"2","nick":"茅云蔚"},
        {"id":"3","nick":"箕建"},
        {"id":"4","nick":"表振"},
        {"id":"5","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：然后在console控制台可以看到显示。

区别总结
axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。
简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。

axios是ajax ajax不止axios

经验 ajax axios json

朗读