【Ajax】发送get请求获取接口数据

编写html实现通过Ajax发送get请求并获取数据

代码实现
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Index</title>
</head>
<body><br><h2 style="text-align: center;">获取数据</h2><div style="text-align: center;"><input type="button" value="获取" onclick="getData()" /><div id="textArea"></div></div>
</body>
<script>function getData(){// 创建请求var xhttp = new XMLHttpRequest();// 定义请求xhttp.open("GET", "https://mock.apifox.cn/m1/3038469-0-default/emp/list", true)// 回调函数,执行完请求后,会将数据返回来xhttp.onreadystatechange = function(){if(this.readyState == 4 && this.status == 200){// this.responseText发送请求后,响应过来的数据document.getElementById("textArea").innerHTML = this.responseText;}};// 发送请求xhttp.send();}
</script>
</html>
结果
  • 运行编写好的html页面,点击获取数据按钮,即可获取到对应接口返回的数据
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/205745.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LinuxBasicsForHackers笔记 -- 管理用户环境变量

查看和修改环境变量 env – 您可以通过从任何目录在终端中输入 env 来查看所有默认环境变量。环境变量的名称始终为大写&#xff0c;如 HOME、PATH、SHELL 等。 查看所有环境变量 set – 查看所有环境变量&#xff0c;包括 shell 变量、局部变量和 shell 函数&#xff08;例…

2. PyTorch——Tensor和Numpy

2.1Tensor和Numpy Tensor和Numpy数组之间具有很高的相似性&#xff0c;彼此之间的互操作也非常简单高效。需要注意的是&#xff0c;Numpy和Tensor共享内存。由于Numpy历史悠久&#xff0c;支持丰富的操作&#xff0c;所以当遇到Tensor不支持的操作时&#xff0c;可先转成Numpy…

conda配置不同版本的python及依赖库--conda conda conda

一、conda介绍 Conda 是一个开源的软件包管理系统和环境管理系统&#xff0c;用于安装多个不同版本的软件包及其依赖关系&#xff0c;并在它们之间轻松切换。 Conda 是为 Python 程序创建的&#xff0c;适用于 Linux&#xff0c;OS X 和Windows Conda可以构建不同的环境&#…

【计算机网络学习之路】HTTP响应报文Cookie原理

目录 HTTP响应报文格式 一. 状态行 状态码与状态码描述 二. 响应头 Cookie原理 一. 前因 二. Cookie的状态管理 结束语 HTTP响应报文格式 HTTP响应报文分为四部分 状态行&#xff1a;包含三部分&#xff1a;协议版本&#xff0c;状态码&#xff0c;状态码描述响应头&a…

企业计算机服务器中了mallox勒索病毒如何处理,Mallox勒索病毒解密

随着计算机技术的不断发展&#xff0c;越来越多的企业利用网络来提高工作效率&#xff0c;但随之而来的网络安全威胁也在不断增加&#xff0c;各种勒索病毒种类不断增加&#xff0c;给企业的数据安全带来严重的威胁&#xff0c;影响企业的生产业务开展。近期&#xff0c;云天数…

什么是css初始化

什么是css初始化 CSS初始化是指重设浏览器的样式。 因为浏览器的兼容问题&#xff0c;不同浏览器对有些标签的默认值是不同的&#xff0c;如果没对CSS初始化往往会出现浏览器之间的页面显示差异。 每次新开发网站或新网页时候通过初始化CSS样式的属性&#xff0c;为我们将用…

opencv的图像直方图处理

1 opencv的直方图 1.1 什么是直方图 直方图是对数据进行统计的一种方法&#xff0c;用于显示数据中各个数值或数值范围的分布情况。它将数据划分为一系列的区间&#xff08;也称为“箱子”或“bin”&#xff09;&#xff0c;然后统计每个区间中数据出现的频次&#xff08;或频…

用心整理的免费API集合

快递物流订阅与推送&#xff08;含物流轨迹&#xff09;&#xff1a;【物流订阅与推送、H5物流轨迹、单号识别】支持单号的订阅与推送&#xff0c;订阅国内物流信息&#xff0c;当信息有变化时&#xff0c;推送到您的回调地址。地图轨迹支持在地图中展示包裹运输轨迹。包括顺丰…

Flink-源算子-读取数据的几种方式

Flink可以从各种来源获取数据&#xff0c;然后构建DataStream进行转换处理。一般将数据的输入来源称为数据源&#xff08;data source&#xff09;&#xff0c;而读取数据的算子就是源算子&#xff08;source operator&#xff09;。所以&#xff0c;source就是我们整个处理程序…

微服务2 Docker学习 P42-P60

Docker学习视频https://www.bilibili.com/video/BV1LQ4y127n4?p42&vd_source8665d6da33d4e2277ca40f03210fe53a 文档资料: 链接&#xff1a;https://pan.baidu.com/s/1P_Ag1BYiPaF52EI19A0YRw?pwdd03r 提取码&#xff1a;d03r Docker 其他笔记 服务器容器化-docker(全…

CSS3 属性: transition过渡 与 transform动画

CSS3 提供了很多强大的功能&#xff0c;使开发人员可以创建更加吸引人的视觉效果&#xff0c;而不需要依赖于 JavaScript 或 Flash。其中&#xff0c;transition 和 transform 是两个常用的属性&#xff0c;它们分别用于创建平滑的过渡效果和元素的变形效果。下面我们将详细介绍…

redis-学习笔记(list)

因为 list 可以头插头删, 尾插尾删, 所以其实更像 C 中的 deque (双端队列) ---- 知道就好, 别乱说, 具体底层编码是啥, 俺也不知道(没注意过) 可以通过组合, 把 list 当作队列 / 栈来用 list 的几种底层编码: ziplist(压缩列表) , linkedlist(链表) , quicklist ziplist 就是将…

第62天:django学习(十一)

cookie和session 发展史 一开始,只有一个页面&#xff0c;没有登录功能&#xff0c;大家看到东西都一样。 时代发展&#xff0c;出现了需要登录注册的网站&#xff0c;要有一门技术存储我们的登录信息&#xff0c;于是cookie诞生了。 cookie: - 存储形式&#xff1a;k:v键值对…

渗透测试工具Nmap的深度解析

在当今数字化时代&#xff0c;网络安全已经成为了企业和个人必须关注的重要问题。为了确保网络的安全&#xff0c;我们需要使用各种工具和技术进行检测和防护。其中&#xff0c;渗透测试是一种非常重要的方法&#xff0c;它可以帮助我们发现网络中的安全漏洞&#xff0c;并采取…

12-07 周四 Pytorch 使用Visdom 进行可视化

简介 在完成了龙良曲的Pytroch视频课程之后&#xff0c;楼主对于pytroch有了进一步的理解&#xff0c;比如&#xff0c;比之前更加深刻的了解了BP神经网络的反向传播算法&#xff0c;梯度、损失、优化器这些名词更加熟悉。这个博客简要介绍一下在使用Pytorch进行数据可视化的一…

Docker安装Elasticsearch和控制台

安装Elasticsearch 安装 Elasticsearch 使用 Docker 非常简单。以下是详细步骤&#xff1a; 安装 Docker&#xff1a;如果你还没有安装 Docker&#xff0c;请从 Docker 官网 下载并安装适用于你操作系统的 Docker 版本。 拉取 Elasticsearch 镜像&#xff1a;打开命令行界面&…

《使用ThinkPHP6开发项目》 - 安装ThinkPHP框架

1.安装ThinkPHP6框架 这里我们使用的是composer安装的安装方式&#xff0c;请确保电脑已经安装了composer&#xff0c;如未安装可查看Composer 安装与使用 | 菜鸟教程 composer create-project topthink/think tp 上面命令安装的是稳定版的&#xff0c;也是最新的稳定版&…

Jquery easyui异步提交表单的两种方式

这篇文章分享一下easyui常用的两种表单异步提交的方式。 目录 第一种&#xff1a;利用ajax提交 $.post() $.ajax() 第二种&#xff1a;使用easyui提供的表单提交方式 首先&#xff0c;准备一个简单的表单&#xff0c;包含三个输入框&#xff0c;在页面引入easyui的js文件。…

探索 HTML 语义化:让你的网页更有意义(下)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

【Linux】进程通信之命名管道mkfifo

1.认识命名管道 匿名管道应用的一个限制就是只能在具有共同祖先&#xff08;具有亲缘关系&#xff09;的进程间通信。如果我们想在不相关的进程之间交换数据&#xff0c;可以使用FIFO文件来做这项工作&#xff0c;它经常被称为命名管道。命名管道是一种特殊类型的文件 2.在命…