HTML请求接口并把返回数据显示在页面上

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <span style="text-align: center;display:block;" class="weather"> </span>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script>
            $.ajax({
                type:'get',
                url:'https://127.0.0.1/analytics/attend?wsId=15112319',
                headers: {
                     "authorization": "Basic MTUxMTIzMTk6MzQ2NTE1YmU4MTkwZDdiNDA2NWJlODMwMzRiY2Q5NDQ=",
                 },
                success:function(response) {
                    //console.log(response);
                    //$(".weather").text("日均出勤:" + response.data.avgHours + br + "部门排名:" + response.data.rankDep + br + "公司排名:"+ response.data.rankCompany);
                    var html='';
                    $(".weather").empty();
                    html+="日均出勤:" + response.data.avgHours + '<br\>' + "部门排名:" + response.data.rankDep + '<br\>' + "公司排名:"+ response.data.rankCompany;
                    $(".weather").append(html);
                },
                error:function (xhr){
                    //console.log(xhr)
                    alert(xhr);
                }
            })
        </script>
    </body>
</html>

原文地址:https://www.cnblogs.com/ai594ai/p/14718854.html

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 HTML 页面上通过接口获取数据显示,你可以使用 JavaScript 来实现。下面是一种常见的方法: 1. 在 HTML 页面中创建一个用于显示数据的容器,例如一个 `<div>` 元素。 2. 使用 JavaScript 中的 XMLHttpRequest 或者 Fetch API 来发送 HTTP 请求接口,并获取返回数据。 3. 在请求成功后,将获取到的数据解析为 JSON 格式(如果返回的是 JSON 数据)。 4. 使用 JavaScript 操作 DOM(文档对象模型)来更新 HTML 页面,将获取到的数据显示在预先创建的容器中。 以下是一个简单的示例代码: ```html <!DOCTYPE html> <html> <head> <title>获取接口数据示例</title> <script> // 发送 HTTP 请求接口并获取数据 function getData() { var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.example.com/data', true); xhr.onload = function() { if (xhr.status === 200) { var data = JSON.parse(xhr.responseText); displayData(data); } }; xhr.send(); } // 在页面显示数据 function displayData(data) { var container = document.getElementById('data-container'); container.innerHTML = ''; // 清空容器 for (var i = 0; i < data.length; i++) { var item = document.createElement('p'); item.textContent = data[i].name; container.appendChild(item); } } </script> </head> <body> <button onclick="getData()">获取数据</button> <div id="data-container"></div> </body> </html> ``` 在这个示例中,当点击 "获取数据" 按钮时,会发送一个 GET 请求到 `https://api.example.com/data` 接口,并将返回数据显示在 `<div id="data-container">` 容器中。你可以根据实际情况修改接口 URL 和数据处理方式来适应你的需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值