专栏首页编程微刊ajax和axios请求本地json数据对比

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内置服务器向外暴露的静态文件夹

图片.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:前台显示:

图片.png

区别总结

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

axios是ajax ajax不止axios

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue+axios请求本地json

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

    王小婷
  • 小程序模拟调用本地json接口数据

    把准备好的json数据渲染到前端界面,模拟在这里加载本地json数据。效果如下,能看到界面渲染的数据。

    王小婷
  • 基于promise用于浏览器和node.js的http客户端的axios

    axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:

    王小婷
  • Vue+axios请求本地json

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

    王小婷
  • CSS3 Transition介绍

    CSS3提供了一种全新的方式来定义CSS属性改变时的过渡效果,通常在:hover、:focus的条件下触发。过去,为了实现这种平滑的过渡效果,我们需要借助于Fl...

    大江小浪
  • 微信小程序客服消息功能 php

    本项目是一个简单微信小程序客服消息类,实现客服消息相关功能。官方给的php示例有误,这里就不再吐槽了。

    孤烟
  • 机器学习可以揭示氧化石墨烯的真实结构

    氧化石墨烯纳米薄片的实际结构是什么?这个问题对于在实际应用中优化碳材料的性能非常重要,澳大利亚CSIRO的研究人员现在已经尝试使用机器学习来回答它。他们使用了2...

    AiTechYun
  • etcd v2文档(2) -- 客户端http请求管理集群成员api

    solate
  • Excel应用实践21:实现工作簿所有工作表中的多值替换

    有两个工作簿,一个工作簿中存放着要查找并替换成的文本,如下图1所示,列A中是要查找的文本,将列A中查找到的文本替换成列B中相应的文本,例如,将找到的“Excel...

    fanjy
  • 你是否有同样的疑惑?没有基础的人自学Python,真的能学会吗?

    Python是一门应用面比较广的语言,称之为胶水语言一点不为过,其他功能强大,在大数据、人工智能领域都会大量应用,并且相对于其他编程语言,有着简单易学的特点,号...

    Python编程大咖

扫码关注云+社区

领取腾讯云代金券