AJAX提交表单到PHP接口后json_decode返回NULL问题咨询

核心问题 #

• 前端提交的表单数据格式不是JSON：你调用的$("#login-form").serialize()生成的是application/x-www-form-urlencoded格式的字符串（类似username=xxx&password=yyy），并非JSON结构，后端直接用json_decode解析必然返回NULL。
• 未设置正确的请求头：AJAX请求没有声明发送的内容类型为JSON，后端无法识别接收的数据格式。
• jQuery的dataType参数配置错误：dataType是指定后端返回数据的预期格式，直接填json即可，填MIME类型application/json会导致jQuery解析响应异常。

前端JS代码修改 #

$(function() {
    $("#login-form").submit(function(e) {
        e.preventDefault();
        // 先把序列化表单转成JSON对象
        const formData = {};
        $(this).serializeArray().forEach(item => {
            formData[item.name] = item.value;
        });
        $.ajax({
            url: 'http://penguin.linux.test/api/login.php',
            type: 'post',
            // 指定发送的内容类型为JSON
            contentType: 'application/json; charset=utf-8',
            // 指定预期后端返回的是JSON格式
            dataType: 'json',
            // 把表单对象转成JSON字符串提交
            data: JSON.stringify(formData),
            success: function(data) {
                console.log(data);
            },
            error: function(data) {
                console.log(data);
            }
        });
    });
});

后端PHP代码优化 #

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 读取原始请求体，不需要传第二个use_include_path参数
    $rawInput = file_get_contents("php://input");
    $data = json_decode($rawInput);
    // 增加解析错误判断，避免后续调用属性报错
    if (json_last_error() !== JSON_ERROR_NONE) {
        // 解析失败返回错误提示，可根据业务调整
        http_response_code(400);
        echo json_encode(['msg' => '请求参数格式错误，要求JSON格式']);
        exit;
    }
    // 后续正常使用$data->username即可
}

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