在html文档里用ajax调用get接口

小田在敲代码

于 2023-06-02 15:19:43 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： ajax html javascript

本文链接：https://blog.youkuaiyun.com/m0_63574519/article/details/131007770

该文展示了如何引入jQuery库，通过Ajax进行GET请求获取JSON数据，然后将数据应用于页面背景和通知展示。在请求失败时，会弹出错误提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.引入jquery

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

2.调用接口

window.onload = function () {
        $.ajax({
            url: '/',
            type: "get",
            dataType: "json",
            data: {
                c:123
            },
            success: function (data) {
                showData(data);
            },
            error: function (msg) {
                alert("ajax连接异常：" + msg);
            }
        });
    };

3.页面渲染

function showData(data) {
        document.body.style.backgroundImage = `url(${data.bgUrl})`;
        document.getElementById("notice").innerHTML = data.notice;
    }