关于fetch,axios提交数据的一些问题

1.fetch的get请求
1.1 fetch发起get请求。方式默认就是get请求，如果不指定请求方式那就是get

fetch("http://localhost/test/action.php").then(function(data){
        // console.log(data);
        return data.text()
    }).then(function(data){
        console.log(typeof data)
        console.log(data)
    })

● 通过data.text()获取的数据为字符串类型，也就是说还需要自己手动转成对象

● 通过data = JSON.parse(data)

fetch("http://localhost/test/action.php").then(function(data){
        // console.log(data);
        return data.text()
    }).then(function(data){
        data = JSON.parse(data); // 将json形式字符串转成对象 
        console.log(typeof data)
        console.log(data)
    })

● 也可以通过返回 data.json() 直接返回json对象

fetch("http://localhost/test/action.php?id=2&name=daming").then(function(data){
        // console.log(data);
    return data.json(); //直接返回对象
    }).then(function(data){
        console.log(typeof data)
        console.log(data)
    })

1.2 fetch发起get请求传递数据

fetch("http://localhost/test/action.php?id=2&name=daming").then(function(data){
        // console.log(data);
        return data.text()
    }).then(function(data){
        data = JSON.parse(data);
        console.log(typeof data)
        console.log(data)
    })

2.fetch 发起post请求

fetch("http://localhost/test/action.php",{
        method:"post",
        body:"id=3&name=laowang",
        headers:{"Content-Type":"application/x-www-form-urlencoded"}
    }).then(function(data){
        // console.log(data);
        return data.json()
    }).then(function(data){
        console.log(typeof data)
        console.log(data)
    })

axios发起get请求
3.1 不传递数据

axios.get("http://localhost/test/action.php").then(function(res){
         console.log(res);
    });

3.2 传递数据

axios.get("http://localhost/test/action.php",{
         params:{
             id:123,
             name:'hello'
         }
     }).then(res=>{
         console.log(res.data);
});

4.axios发起post请求
4.1 方法一保持默认请求头信息application/json

axios.post('http://localhost/test/action.php', {id:1,name:"laobai"})
   .then(function(ret){
     console.log(ret.data)
 })

● 在后台代码不变的情况下，axios发起post请求默认的请求类型是 headers:{"Content-Type":"json"}

● PHP代码

header("Access-Control-Allow-Origin: *"); // 允许任意域名发起的跨域请求
header("Access-Control-Allow-Methods:PUT,GET,POST,DELETE,OPTIONS"); // 允许这些常见的请求方式
header('Access-Control-Allow-Headers:x-requested-with,content-type'); // 

echo file_get_contents('php://input');

4.2 方法二，设置头信息为 application/x-www-form-urlencoded
前端代码

axios.defaults.headers["content-type"] = "application/x-www-form-urlencoded";
axios.post("http://localhost/test/action.php",{id:123,name:'hello'}
       ).then(res=>{
  console.log(res.data);
     });

后台代码：

<?php
header("Access-Control-Allow-Origin: *"); // 允许任意域名发起的跨域请求
header("Access-Control-Allow-Methods:PUT,GET,POST,DELETE,OPTIONS"); // 允许这些常见的请求方式
echo file_get_contents('php://input');
?>

4.3 方法三，修改传递的参数，就自动修改了请求头信息为 application/x-www-form-urlencoded
前端代码：

 var params = new URLSearchParams();
 params.append('uname', 'zhangsan');
 params.append('pwd', '111');

 axios.post('http://localhost/test/action.php', params).then(function(ret){
   console.log(ret.data)
 })

后台代码

<?php
header("Access-Control-Allow-Origin: *"); // 允许任意域名发起的跨域请求
header("Access-Control-Allow-Methods:PUT,GET,POST,DELETE,OPTIONS"); // 允许这些常见的请求方式
header('Access-Control-Allow-Headers:x-requested-with,content-type'); // 
echo file_get_contents('php://input');
?>

评论 (0)