后端输出二进制数据,前端fetch接受二进制数据,并转化为字符输出

在PHP中,你可以将字符串或其他数据类型转换为二进制数据,并通过HTTP响应发送给前端。

php 复制代码
<?php
//设置正确的Content-Type头部,以便前端可以正确处理二进制数据
header('Content-Type:application/octet-stream');
$str ="hello world!";
$binaryData=hex2bin(bin2hex($str));
echo $binaryData;
?>

在这个前端代码中,我们使用fetch API请求PHP脚本,并获取二进制数据。然后,我们将ArrayBuffer转换为字符串,以便在JavaScript中使用。

javascript 复制代码
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
        <title>测试后端输出二进制,前端接收二进制并转化为字符</title>
    </head>
    <body>
        <script>
            fetch('fetchArraybuffer.php',{
                method:'get'
            })
            .then((response)=>{
                if(response.ok && response.status===200)
                {
                    return response.arrayBuffer();
                }
                throw new Error('返回数据出错');
            })
            .then((data)=>{
                const decoder=new TextDecoder('utf-8');
                const decodeStr=decoder.decode(data);
                console.log(decodeStr);  
            })
            .catch((error)=>{
                console.log('连接后端出错',error);
            });
        </script>
    </body>
</html>
相关推荐
钟离墨笺9 分钟前
Go语言--2go基础-->基本数据类型
开发语言·前端·后端·golang
爱吃泡芙的小白白14 分钟前
Vue 3 核心原理与实战:从响应式到企业级应用
前端·javascript·vue.js
卓怡学长1 小时前
m115乐购游戏商城系统
java·前端·数据库·spring boot·spring·游戏
老陈聊架构1 小时前
『AI辅助Skill』掌握三大AI设计Skill:前端独立完成产品设计全流程
前端·人工智能·claude·skill
Ulyanov2 小时前
从桌面到云端:构建Web三维战场指挥系统
开发语言·前端·python·tkinter·pyvista·gui开发
cypking2 小时前
二、前端Java后端对比指南
java·开发语言·前端
糠帅傅蓝烧牛肉面2 小时前
单实例多MCP聚合服务:两种实现方案深度对比
前端·docker·ai
JosieBook2 小时前
【Vue】12 Vue技术—— Vue 事件修饰符详解:掌握事件处理的高级技巧
前端·javascript·vue.js
艾斯特_3 小时前
Echarts常用配置项及解释
前端·javascript·echarts
m0_502724953 小时前
飞书真机调试
开发语言·前端·javascript