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']);
}
相关推荐
伍哥的传说7 分钟前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_4244091915 分钟前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding15 分钟前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜17 分钟前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD17 分钟前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding18 分钟前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空21 分钟前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
柚子81631 分钟前
scroll-marker轮播组件不再难
前端·css
你的人类朋友1 小时前
🫏光速入门cURL
前端·后端·程序员
01传说2 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js