jQuery的ajax 发送异步请求   与   fetch 发送异步请求

1、jQuery的ajax 发送异步请求

但是我们大部分时候可能用上面原生的ajax的时候是很少的，

我们一般都是用jQuery封装好的Api，这个前提是我们需要先引入jQuery文件，否则提示报错，

jQuery的ajax使用步骤大致如下所示

<title>jQuery的ajax 发送异步请求</title>
</head>
<body>

    <button id="btn">点击，发送异步请求</button>
   

    <script src="./js/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
            // 接口地址
           
             // 网易云音乐api -- 获取banner轮播图 接口地址
            // var apiUrl = `http://localhost:3000/banner`
            // var apiUrl = ``

            // 网易云音乐api--- 获取热门歌手 接口地址
            var apiUrl = `http://localhost:3000/top/artists`

            // 网易云音乐api--- 获取电台主播新人榜 接口地址
            // var apiUrl = `http://localhost:3000/dj/toplist/newcomer`

            $('#btn').click(function(){
                // 发送异步请求
                $.ajax({
                    url:apiUrl,
                    type:'get',
                    dataType:'json',
                    success:function(res){
                        console.log(res.artists);
                    }
                })
            })
        })
    </script>

预览效果：

2、 fetch 发送异步请求

  • Fetch API是新的ajax解决方案 Fetch会返回Promise

  • fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象

  • 基本结构大致如下 fetch(url, options).then()

<title>fetch 发送异步请求</title>
</head>
<body>

    <button id="btn">点击，发送异步请求</button>
   
    <script>
        // 接口地址
        // 网易云音乐api -- 获取banner轮播图 接口地址
        var apiUrl = `http://localhost:3000/banner`

        var btn = document.querySelector('#btn')
        btn.onclick = function(){
            fetch(apiUrl).then((res)=>{
                // 他返回一个promise实例对象 用于获取后返回的数据
                return res.text()

            }).then((data)=>{
                // 在这个then里面 我们能拿到最终的数据
                dobj = JSON.parse(data)
                console.log(dobj.banners);
            })
        }
    </script>

预览效果：

# ajax # vue.js
Logo
魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

cover

全家桶集齐！Qwen3.5四款小模型上线魔乐社区，附昇腾全套实践教程

avatar 魔乐社区

Pont - 搭建前后端之桥：高效、灵活的接口管理工具

Pont 是一款强大的数据服务层解决方案，它能够帮助开发者快速搭建前后端之间的桥梁，实现接口的高效管理和代码自动生成。无论是新手还是有经验的开发者，都能通过 Pont 轻松处理接口文档、生成类型安全的 API 代码，从而显著提升开发效率。[![Pont 工具标志](https://raw.gitcode.com/gh_mirrors/po/pont/raw/3f1b7d4bbba3fd2dda

avatar 魔乐社区

如何快速上手 hvac：HashiCorp Vault Python 客户端零基础入门指南

**hvac** 是 HashiCorp Vault 的 Python 3.X 客户端库，专为开发者提供简单高效的 Vault 交互方式。无论你是需要管理密钥、配置身份验证，还是实现安全的秘密数据存储，hvac 都能帮助你轻松搞定 Vault 的各项操作。本文将带你零基础快速入门，从安装到基础操作，让你在几分钟内即可上手使用这个强大的工具。[![hvac 客户端 Logo](https://r

avatar 魔乐社区