mui ajax交互 php,Mui3.2.0中ajax设置headers为{'Content-Type': 'application/json'}发起post请求，后端接收不到数据的解决方案（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部分

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

if($_SERVER["CONTENT_TYPE"]=="application/json"){

$input = file_get_contents('php://input');

$arr = explode("&", $input);

<