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']);
}
相关推荐
DoraBigHead3 分钟前
🧠【彻底读懂 reduce】acc 是谁?我是谁?我们要干嘛?
前端·javascript·面试
future141215 分钟前
项目开发日记
前端·学习·c#·游戏开发
汪子熙24 分钟前
CSS 中 td:last-child a 选择器详解
前端·javascript
q5673152331 分钟前
Koa+Puppeteer爬虫教程页面设计
javascript·css·爬虫
北北~Simple38 分钟前
第一次搭建数据库
服务器·前端·javascript·数据库
GanGuaGua1 小时前
Vue3常用指令
前端·javascript·vue.js
欧阳天风1 小时前
录音实时上传
前端·javascript
江号软件分享1 小时前
从DNS到防火墙:NetDisabler多策略断网方法详解
前端
灵犀学长1 小时前
解锁HTML5页面生命周期API:前端开发的新视角
前端·html·html5
江号软件分享1 小时前
轻松解决Office版本冲突问题:卸载是关键
前端