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

最新推荐文章于 2024-04-25 14:27:36 发布
最新推荐文章于 2024-04-25 14:27:36 发布
阅读量2.5k 收藏 2
点赞数
文章标签： html javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/petrel_921/article/details/130091118
版权 
<!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

petrel_0
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html文件里post json,以POST方式进行HTTP请求调用（入参为JSON格式）
weixin_42510888的博客
06-17 1576
今天总结一下，调用第三方接口地址，以POST方式进行HTTP请求，并且入参为JSON格式方法:引用：using System.Text;using System.Net;using System.IO;string url="http://";//第三方接口地址paramStr //json字符串 入参Encoding encoding = Encoding.UTF8;调用：HttpResult ...
电脑html接口是什么意思,HDMI、DVI 我们的电脑为什么会有这么多种视频接口？
weixin_35014204的博客
06-07 4350
【PConline DIY老司机】前一段时间，刚换了一个显示器，显示器配上了所有种类的视频连接线，而我自己用的话仅仅会去使用其中的一种。其实大家在买电脑的时候也会看到显示器、显卡有多种接口。那为什么我们现在的电脑视频接口还这么多种？这些接口除了外形不一样又有什么区别？视频接口多样性在我们的电脑出现的历史中，有很多接口出现了，仅视频接口我们目前能常接触到的就有VGA、DVI、HDMI和DP接口，而且...
jQuery中ajax请求后台返回json数据并渲染HTML的方法
12-29
html实例 <input type=text name=dishes value= class=seek_product placeholder=请输入菜名/> <button type='button' class=btn_nor onclick=seek_product()>搜索</button> 序号 <th width=70%
接口返回的主动html
编程日常记录与总结 https://franciswmf.iteye.com
04-12 5768
格式化后： console.log('formsubmit'); document.all.targetFormId.submit(); 格
在 HTML中如何实现站内检索并返回检索结果
最新发布
emmmaha的博客
04-25 422
将搜索表单的 action 属性设置为使用第三方搜索引擎的搜索接口，查询参数为表单输入框中的值（如上例中的。在后端处理搜索请求的服务器端脚本中，根据搜索表单提交的查询参数，在站点的内容中进行检索，并返回匹配结果。在 JavaScript 中编写一个搜索函数，获取输入框中的值，并在页面的内容中进行检索并显示匹配结果。在 HTML 中创建一个搜索表单，其中包含一个输入框和一个提交按钮。在 HTML 中创建一个搜索表单，其中包含一个输入框和一个提交按钮。在 HTML 中创建一个搜索输入框和一个搜索按钮。
java发送http请求
yaoxin524的博客
11-13 409
最常用的Http请求无非是get和post，get请求可以获取静态页面，也可以把参数放在URL字串后面，传递给servlet。post与get的不同之处在于post的参数不是放在URL字串里面，而是放在http请求的正文内。 在Java中可以使用HttpURLConnection发起这两种请求，了解此类，对于了解soap，和编写servlet的自动测试代码都有很大的帮助。 下面的代码简单描述了...
html请求接口_前端工程师吐后端工程师（第八讲）——接口的开发
weixin_39688170的博客
11-22 938
上一讲我们介绍了如何写让模板变量在页面上展示，本讲我们介绍一下后端开发工作中最常用的功能——接口。创建一个go_test4文件夹，然后把go_test3中的代码复制进去。然后打开main.go文件，进行更改。说到接口就必不可少的涉及到传值和接口返回，还有GET方式 、POST方式获取数据。下面我们就先举例来看看一个GET接口如何接收参数并且返回数据，具体代码如下：package 代码前半部分还是跟...
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
10-17
在微信小程序的开发过程中，与服务器的交互是必不可少的，其中`wx.request`是关键的网络请求接口。本文将深入探讨如何使用`wx.request`来请求服务器上的JSON数据，并将其渲染到微信小程序的WXML页面。 首先，`wx....
Django实现将views.py中的数据传递到前端html页面,并展示
09-17
在templates目录下创建一个名为`year_test.html`的HTML模板文件，我们可以使用Django模板语言（DTL）来遍历并显示传递过来的数据。在本例中，我们创建了一个选择框，它的选项由`data`变量提供。 ```html <!DOCTYPE ...
php写app接口并返回json数据的实例(分享)
12-19
接着，根据返回的状态码，遍历数据并动态地在页面上展示结果。 **其他相关知识点**： - 在实际开发中，应避免明文存储数据库凭据，使用环境变量或配置文件存储。 - 对于现代PHP开发，推荐使用`PDO`或`mysqli`扩展...
前端项目请求接口时返回的response是html文档怎们办？
热门推荐
青蛙king的博客
10-25 1万+
前端项目请求接口时返回的response竟然是html，这是为什么呢？ 遇到这种情况，一般是域名不对。 比如：正常请求这个接口需要用的是测试环境或者线上环境的域名，而你用的是localhost或者127.0.0.1，此时接口找不到资源就会返回当前项目的index.html文档了。 那么有什么解决办法呢？ 第一种解法：配置 proxy，将本地域名代理到能够请求道资源的域名。 我这边是本地起的 node 项目的提供的接口服务，该 node 项目的端口号是 3000。 "proxy": { "/api
纯html页面请求接口文档微信分享
11-30
本人新手，有大神帮助写了一个没有在html请求微信jssdk接口做的微信分享，希望有用
电脑html接口是什么意思,笔记本电脑这个接口是什么|笔记本电脑常见接口介绍...
weixin_34666714的博客
06-07 3241
笔记本电脑机身有非常多的接口和孔，由于没有中文标识，除了电源接口、网线接口和usb接口，多数用户不知道其他接口是什么接口，更不清楚接口的用途。这边系统城小编跟大家整理分享笔记本电脑常见的接口介绍。一、电源接口电源接口是笔记本电脑的必备接口，功能是给笔记本充电，游戏本在接上电源后可以发挥最高性能。外观上，电源接口大致有圆形、方形和USB Type-C三种，圆形接口最为普遍，因为规格的不同，圆形接口的...
提交表单
AturboS的博客
06-07 533
~~~
前端渲染后端返回的HTML格式的数据
hyduan_h5的博客
10-18 5293
在日常开发中，经常有需要前端渲染后端返回页面的需求，对于不同数据结构，前端的渲染方式也不尽相同，本文旨在对各种情况进行总结。
html请求接口_接口自动化测试的实现
weixin_39608300的博客
11-27 432
最近接到一个接口自动化测试的case，并展开了一些调研工作，最后发现，使用pytest测试框架并以数据驱动的方式执行测试用例，可以很好的实现自动化测试。这种方式最大的优点在于后续进行用例维护的时候对已有的测试脚本影响很小。当然，pytest还有以下其他优点：可以让用户写出更为紧凑的测试套件；涉及到的样板代码并不多，因此用户能够容易地编写和理解各种测试；测试夹具（fixture）函数常被用来向测试函...
把js里面的值显示到html上的办法
YZXnuaa的博客
11-08 2289
如果你使用的是现代前端框架（如 React, Vue, Angular），它们有自己的机制来更新 DOM 和显示数据。: 这个方法会向 HTML 文档写入内容，但通常不推荐使用，因为它会重写整个 HTML 页面。: 在现代浏览器中，你可以使用模板字面量来构造 HTML 字符串，然后将其插入到 DOM 中。: 这两个属性也可以用来修改元素的内容，但不会解析 HTML 标签。: 你可以创建新的 HTML 元素，并将其添加到 DOM 中。属性，可以将内容插入到指定的元素中。: 通过改变 HTML 元素的。
html请求接口_接口测试平台代码实现77: 多接口用例17
weixin_39991531的博客
12-01 606
首先恭喜下Testerhome大会开幕，并且我们社团在testerhome的百团大战中名列前三。其次是平台的在线体验地址发布：阿里云服务器：http://47.97.77.125:8000/home/用户名：admin密码：123456你也可以自己在登陆页面注册新的。...
电脑html接口是什么意思,操作系统是什么的接口
weixin_42484477的博客
06-07 1434
操作系统是“用户与计算机”的接口。在计算机内，操作系统管理计算机系统的各种资源，扩充硬件的功能；对外，计算机操作系统提供良好的人机界面，方便用户使用计算机。它在整个计算机系统中具有承上启下的地位，所以计算机操作系统是用户与计算机的接口。操作系统(Operation System，简称OS)是管理计算机硬件与软件资源的计算机程序。操作系统需要处理如管理与配置内存、决定系统资源供需的优先次序、控制输入...
html通过接口获取数据显示在网页上
07-12
要在 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、付费专栏及课程。

余额充值