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

问题场景

php部分
 

1. <?php 
2.     $name = $_POST['name']; 
3.     $password = $_POST['password']; 
4.     var_dump($name); 
5.     var_dump($password); 
6. ?> 

mui.ajax()部分

1. mui.ajax({ 
2.     url: 'http://192.168.12.74:80/test01.php', 
3.     type: 'post', 
4.         headers:{'Content-Type': 'application/json'}, 
5.     data: { 
6.         name: 'dcloud', 
7.         password: '123456' 
8.     }, 
9.     success: function(data) { 
10.         console.log(data); 
11.     }, 
12.     error: function(xhr, type, errorThrown) { 
13.         console.log(type); 
14.     } 
15. }); 

控制台信息

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部分

1. <?php 
2. if ($_SERVER["CONTENT_TYPE"] == "application/json") { 
3.     $input = file_get_contents('php://input'); 
4.     var_dump($input); 
5.     $object = json_decode($input); 
6.     $name = $object->name; 
7.     var_dump($name); 
8. } 
9. ?> 

控制台信息一

'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。

 

1. mui.ajax({ 
2.     url: 'http://192.168.12.74:80/test01.php', 
3.     type: 'post', 
4.     headers: { 
5.         'Content-Type': 'application/json' 
6.     }, 
7.     processData: false, 
8.     data: JSON.stringify({ 
9.         name: 'dcloud', 
10.         password: '123456' 
11.     }), 
12.     success: function(data) { 
13.         console.log(data); 
14.     }, 
15.     error: function(xhr, type, errorThrown) { 
16.         console.log(type); 
17.     } 
18. }); 

控制台信息二

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

方案二

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

php部分

1. <?php 
2.     if($_SERVER["CONTENT_TYPE"]=="application/json"){ 
3.         $input = file_get_contents('php://input'); 
4.         $arr = explode("&", $input); 
5. <