fetch测试用get方法发送数据和获取后端数据

前端fetchget.html把我们想要发送的数据以get的形式发到后端;

如:foo=bar&baz=que格式的数据发送给后端

javascript 复制代码
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
        <title>测试fetch的get用法</title>
    </head>
    <body>
        <script type="text/javascript">
        //第一个参数为URL,第二个参数为init的对象
            fetch('fetchget.php?foo=bar&baz=qux',{
                modth:"get",//发送模式
                headers:{'Content-Type':'application/x-www-form-urlencoded;charset=UTF8'}//设置发送标头
            }).then(response=>{
            //这里期约返回response,再检查response的ok,status属性是否是真
                if(response.ok && response.status===200)
                {
                //response.json()方法转换为json格式;获取他的实例是data
                //response.blob()实例为blob;response.text()实例为data
                    return response.json();
                }
                throw new Error('Network response was not ok.');
            }).then(data=>{
                //这里是response.json()方法的实例,实例就是返回的数据
                console.log(data.data.foo);
            }).catch(error=>{
                console.log('提取数据发生错误:',error);
            });
        </script>
    </body>
</html>

//这里是后端处理数据和返回数据

php 复制代码
<?php
//检查获取模式是否为get
if($_SERVER['REQUEST_METHOD']==='GET')
{
//获取前端的值
    $foo=$_GET['foo'];
    $baz=$_GET['baz'];
    if(isset($foo)&&isset($baz))
    {
    //把要返回的值集中到数组中
        $data=[
            'message'=>'hello world',
            'timestamp'=>date('Y-m-d H:i:s'),
            'data'=>['foo'=>$foo,'baz'=>$baz]
        ];
    }
    //设置标头为json格式
    header('Content-Type:application/json');
    //返回数据
    echo json_encode($data);
    
}else
{
//如果不是get模式,则返回错误信息
    header('HTTP/1.1 405 Method Not Allowed');
    echo json_encode(['error'=>'Method Not Allowed']);
}
相关推荐
灿灿1213812 分钟前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴30 分钟前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack1 小时前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python
31535669131 小时前
一个简单的脚本,让pdf开启夜间模式
前端·后端
尘心cx1 小时前
前端-CSS-day1
前端·css
知否技术1 小时前
前端常说的 SCSS是个啥玩意?一篇文章给你讲的明明白白!
前端·scss
CN-Dust1 小时前
[FMZ][JS]第一个回测程序--让时间轴跑起来
javascript
幼儿园技术家1 小时前
Uniapp简易使用canvas绘制分享海报
前端
开开心心就好2 小时前
免费PDF处理软件,支持多种操作
运维·服务器·前端·spring boot·智能手机·pdf·电脑
全宝2 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css