首页 > 其他分享 >H5 html单页面实现对接接口,获取接口数据

H5 html单页面实现对接接口,获取接口数据

时间:2024-08-13 11:49:50浏览次数:8  
标签:请求 接口 H5 xhr JSON html data fetch

一、AJAX的一种实现方式,XMLHttpRequest

var xhr = new XMLHttpRequest();  
xhr.open("POST", "你的接口URL", true);  
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");  
  
// 准备发送的数据  
var data = JSON.stringify({  
    key1: "value1",  
    key2: "value2"  
});  
  
xhr.onreadystatechange = function () {  
    if (xhr.readyState == 4 && xhr.status == 200) {  
        // 请求成功,处理响应数据  
        console.log(xhr.responseText);  
    }  
};  
  
xhr.send(data);

二、fetch API来发送POST请求并携带body参数(通常是JSON格式的数据)是一种常见的做法,

注意:

fetch 调用内部的 .then() 方法中执行的,因此它只能在 fetch 请求成功完成并且响应数据被解析为 JSON 后才能访问到 data ,这意味着 data 变量在 fetch 调用外部是不可直接访问的,因为它在异步操作完成之前还不存在。

<script>    
    fetch('你的接口URL', {  
        method: 'POST', // 设置请求方法为POST  
        headers: {  
            'Content-Type': 'application/json', // 设置请求头,指明发送的信息类型为JSON  
            // 如果需要,可以在这里添加其他请求头,比如认证信息  
            // 'token': 'Bearer your_token_here'  
        },  
        body: JSON.stringify(postData) // 将JavaScript对象转换为JSON字符串,并作为请求体发送  
    })  
    .then(response => {  
        // 检查响应是否成功  
        if (!response.ok) {  
            throw new Error('Network response was not ok');  
        }  
        return response.json(); // 解析JSON响应数据  
    })  
    .then(data => {  
        console.log('Success:', data); // 处理响应数据  
    })  
    .catch(error => {  
        console.error('There was a problem with your fetch operation:', error);  
        // 在这里处理错误,比如显示错误消息给用户  
    });  
</script> 

 

标签:请求,接口,H5,xhr,JSON,html,data,fetch
From: https://www.cnblogs.com/xx321/p/18356547

相关文章

  • Adobe Animate Createjs H5
    AdobeAnimateCC是AdobeFlash的继任者,提供了更现代的动画和互动功能。它允许用户创建动画,并导出到HTML5Canvas、WebGL或SVG格式。CreateJS是一个强大的JavaScript库,可以与AdobeAnimateCC一起使用,帮助开发人员在Web上实现动画和互动功能。对于没有Flash基础的......
  • Drop-seq测序平台dge.txt.gz格式转化成h5格式
    dge.txt.gz格式简介dge.txt.gz格式是Drop-seqformat(一个单细胞RNA测序平台,三种常见基于液滴的单细胞RNA测序平台10XGenomicsChromium、inDrop和Drop-seq),也可能命名为.digital_expression.txt.gz。Drop-seq测序平台官网dge.txt格式转化成h5格式因为这个格式确实少见,所以把......
  • 404页面html代码
    404页面html代码_百度搜索(baidu.com)<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title......
  • C10-01-HTML示例
    简单HTML示例<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metaname="Descripti......
  • 只用一个 HTML 元素可以写出多少形状?——多边形篇
    上一篇章的末尾,我们只用一个 div 元素写了一个鸡蛋,在欧几里得平面几何中,鸡蛋的形状已经不能算是标准形状了。对于非标准的形状,没有比较直观的几何规律,命名方面也更加困难,俗称不规则图形,在欧几里得平面几何中,将其统称为多边形。在平行四边形篇中,我们首先使用常规的盒模型写出......
  • ElasticSearch接口
    DSL语法DSL为ES过滤数据时的语法,可用于查询、删除等操作基本构成默认分页查询,size默认为10。ES查询默认最大文档数量限制为10000,可通过index.max_result_window配置来控制,建议考虑通过滚动查询或其他策略实现超过10000限制的查询{"query":{"match":{......
  • 《企业微服务实战 · 接口鉴权思路分享》
    ......
  • [HTML5] 一文读懂H5新特性的应用
    文章目录一、HTML5新增语义化标签1.`<header>`标签语法使用场景常用属性示例代码2.`<footer>`标签语法使用场景常用属性示例代码3.`<nav>`标签语法使用场景常用属性示例代码4.`<article>`标签语法使用场景常用属性示例代码5.`<section>`标签语法使用场景......
  • HTML并不简单读书笔记-2
    第二章a元素最简单的a标签,点击后跳转到对应的页面,再加上herf属性<ahref="http://www.w3school.com.cn">W3School</a>rel属性浏览器支持30多个rel属性下面介绍重点关注的值rel=“nofollow”这是seo的常用策略,告诉搜索引擎不要追踪这个链接。在以下两种情況下需要......
  • 接口和多态的区别
    接口和多态的区别区别:概念层面:接口是一种定义行为规范的方式,而多态是这种行为规范在运行时的具体表现。实现机制:接口通过关键字interface来定义,而多态的实现可能涉及到接口的实现、继承和方法重写。目的:接口的目的是为了定义一个共同的规范,使得不同的类可以有统一的调用方......