JS异步调用传递数组到PHP的收发及调试相关问题咨询

问题根源 #

你收到[object Object]是因为FormData.append()传入对象类型的值时，JS会自动调用toString()方法转成字符串，没有正确序列化对象内容，后端拿到的本身就是无效的字符串，无法直接转为数组。

1. 正确的前后端交互方案 #

方案1：保留FormData传输（适合有文件上传的场景）

前端修改：

序列化对象为JSON字符串后再加入FormData，修改sendData2的遍历逻辑：

function sendData2(url,emailPass){
    let bodyFormData = new FormData()
    for (const [key, value] of Object.entries(emailPass)) {
        // 对象类型先转JSON字符串
        const val = typeof value === 'object' ? JSON.stringify(value) : value
        bodyFormData.append(key, val)
    }
    return axios({
        method: 'POST',
        url: url,
        data: bodyFormData,
        headers: {'Content-Type': 'multipart/form-data'}
    })
    .then(function(response){
        return response.data
    })
    .catch(function(response){
        return response
    })
}

后端修改：

对收到的skippers做JSON解码，转为关联数组：

// 第二个参数设为true，将JSON对象转为PHP关联数组
$skippers = json_decode($_POST['skippers'], true);
// 后续可正常调用array_keys、array_values
$skipperIds = array_keys($skippers);
$skipperValues = array_values($skippers);

方案2：直接用JSON格式传输（无文件上传时更简便）

前端修改：

不需要构造FormData，直接传JS对象，axios会自动处理请求头：

function sendData2(url,emailPass){
    return axios({
        method: 'POST',
        url: url,
        data: emailPass
    })
    .then(function(response){
        return response.data
    })
    .catch(function(response){
        return response
    })
}

后端修改：

JSON格式的请求参数不会进入$_POST，需要从输入流读取：

// 读取请求体的JSON内容并转为关联数组
$postData = json_decode(file_get_contents('php://input'), true);
$skippers = $postData['skippers'];
$skipperIds = array_keys($skippers);
$skipperValues = array_values($skippers);

2. 查看print_r输出的方法 #

方法1：前端调试工具查看

打开浏览器开发者工具的「网络」面板，找到对应的POST请求，点击查看「响应」标签，print_r输出的内容会直接展示在响应内容里。

方法2：写入服务器日志文件

将print_r的输出内容写入服务器本地文件，不会返回给前端：

// 第二个参数设为true表示返回输出内容而非直接打印
$debugInfo = print_r($skippers, true);
// 追加写入到同目录的debug.log文件，可自行修改路径
file_put_contents('./debug.log', date('[Y-m-d H:i:s]')."\n".$debugInfo."\n-------------------\n", FILE_APPEND);

直接访问服务器上的debug.log文件即可查看调试内容。

内容的提问来源于stack exchange，提问作者DCR