【文档】解决 MUI v3.2.0 headers 为 {'Content-Type': 'application/json'} 发起 POST 请求异常的问题

Mui v3.2.0中ajax设置headers为{'Content-Type': 'application/json'}发起post请求，后端接收不到数据的解决方案（php为例）

问题场景

php部分

<?php  
    $name = $_POST['name'];  
    $password = $_POST['password'];  
    var_dump($name);  
    var_dump($password);  
?>  

mui.ajax()部分

mui.ajax({  
    url: 'http://192.168.12.74:80/test01.php',  
    type: 'post',  
        headers:{'Content-Type': 'application/json'},  
    data: {  
        name: 'dcloud',  
        password: '123456'  
    },  
    success: function(data) {  
        console.log(data);  
    },  
    error: function(xhr, type, errorThrown) {  
        console.log(type);  
    }  
});

控制台信息

Notice: Undefined index: name in test01.php on line 2
Notice: Undefined index: password in test01.php on line 3
我们按照通常的post方法去读取数据，发现并没有name和password这两个参数。

问题分析

可以参看下这篇文章《四种常见的 POST 提交数据方式》
当application/json这个Content-Type作为响应头时，我们需要手动处理一下：
从php://input 里获得原始输入流，再json_decode成对象。

方案一

php部分

<?php  
if ($_SERVER["CONTENT_TYPE"] == "application/json") {  
    $input = file_get_contents('php://input');  
    var_dump($input);  
    $object = json_decode($input);  
    $name = $object->name;  
    var_dump($name);  
}  
?>  

控制台信息一

'name=dcloud&password=123456' test01.php on line 4
null test01.php on line 7
此时，$input并不是一串json字符串，所以我们用json_decode去转换依旧是失败的，并不能拿到我们想要的数据。

mui.ajax()部分

mui.ajax()默认会对data里面的数据进行序列化，最终导致php接受到的是序列化以后的字符串。我们需要禁用对data的序列化（processData:false），并把参数对象序列化成json字符串（JSON.stringify()）传给data。

mui.ajax({  
    url: 'http://192.168.12.74:80/test01.php',  
    type: 'post',  
    headers: {  
        'Content-Type': 'application/json'  
    },  
    processData: false,  
    data: JSON.stringify({  
        name: 'dcloud',  
        password: '123456'  
    }),  
    success: function(data) {  
        console.log(data);  
    },  
    error: function(xhr, type, errorThrown) {  
        console.log(type);  
    }  
});  

控制台信息二

'dcloud' test01.php on line 7
name参数的值被正确解析，问题解决。

方案二

只需修改php部分即可，方案一中我们在未设置processData属性为false时，获取的是一串序列化后的字符串'name=dcloud&password=123456'。我们对字符串进行截取，同样可以解析出我们想要的参数数据。

php部分

<?php  
    if($_SERVER["CONTENT_TYPE"]=="application/json"){  
        $input = file_get_contents('php://input');  
        $arr = explode("&", $input);  
    $narr = explode("=", $arr[0]);  
    $parr = explode("=", $arr[1]);  
    $name = $narr[1];  
    $password = $parr[1];  
        var_dump($name);  
        var_dump($password);  
    }  
?>  

mui.ajax()部分：

mui.ajax({  
    url: 'http://192.168.12.74:80/test02.php',  
    type: 'post',  
    headers: {  
        'Content-Type': 'application/json'  
    },  
    data: {  
        name: 'dcloud',  
        password: '123456'  
    },  
    success: function(data) {  
        console.log(data);  
    },  
    error: function(xhr, type, errorThrown) {  
        console.log(type);  
    }  
});  

控制台信息

'dcloud' test02.php on line 9
'123456' test02.php on line 10
通过对字符串的截取分组，最终取得我们想要的参数数据，但是此方法的缺点在于参数的顺序不明或数量太多会非常繁琐。

后续解决

Mui v3.3.0，将对此情况进行更加精确的处理，3.2.0版本遇到此问题可按照上面的方式进行处理数据。