使用$.ajax()向PHP脚本传递数组与变量失败的技术问询

看起来你遇到的Unexpected token <错误是典型的服务器返回了非JSON内容（比如PHP的报错HTML、警告信息），而根源在于你传递FormData的方式不对。让我一步步帮你修正：

问题根源分析 #

你现在的AJAX代码把form_data（FormData对象）嵌套在一个普通JS对象里传递，而且设置了processData: true——这会让jQuery尝试把FormData转换成字符串，直接破坏了FormData的结构，导致PHP那边无法正确接收文件，进而抛出错误，返回的是HTML格式的报错信息，而不是你期望的JSON，所以前端执行JSON.parse(out)时就触发了解析错误。

修正步骤 #

1. 把额外参数category直接追加到FormData里 #

不要把FormData和普通变量放在一个对象里，而是用form_data.append()把category也加入到FormData中：

var form_data = new FormData();
var l = document.getElementById('file_to_upload').files.length;
for (var x = 0; x < l; x++) {
    form_data.append("files[]", document.getElementById('file_to_upload').files[x]);
}
// 新增：把category追加到FormData中
form_data.append('category', category);

2. 修正AJAX核心配置 #

• data直接传递FormData对象，不要嵌套在其他对象里
• processData必须设为false（阻止jQuery自动处理FormData，避免破坏其结构）
• 因为你已经设置了dataType: 'json'，jQuery会自动把服务器返回的JSON解析成JS对象，所以success回调里不需要再调用JSON.parse(out)

修改后的AJAX部分代码：

$.ajax({
    url: 'includes/uploadImages.php',
    dataType: 'json',
    cache: false,
    contentType: false,
    processData: false, // 这里必须设为false！
    data: form_data, // 直接传递FormData对象
    type: 'post',
    success: function(arrResponse) { // 这里已经是解析好的JS对象
        rtnMsg = arrResponse.rtnMsg;
        success = arrResponse.success;
    },
    error: function(jqXHR, exception) {
        // 优化错误提示，方便排查问题
        if (jqXHR.status === 0) {
            rtnMsg = 'Not connect.\n Verify Network.';
        } else if (jqXHR.status == 404) {
            rtnMsg = 'Requested page not found. [404]';
        } else if (jqXHR.status == 500) {
            rtnMsg = 'Internal Server Error [500].';
        } else if (exception === 'parsererror') {
            rtnMsg = 'Requested JSON parse failed. Server returned: ' + jqXHR.responseText;
        } else if (exception === 'timeout') {
            rtnMsg = 'Time out error.';
        } else if (exception === 'abort') {
            rtnMsg = 'Ajax request aborted.';
        } else {
            rtnMsg = 'Uncaught Error.\n' + jqXHR.responseText;
        }
        success = '0';
        showMsg();
    }
}).done(function() {
    $("#file_to_upload").val("");
    showMsg();
});

3. PHP端的关键检查 #

• 确保uploadImages.php没有输出任何多余内容（比如调试用的echo、HTML标签），所有输出只能是json_encode()生成的JSON字符串
• 确保PHP正确接收参数和文件：

// 接收category参数
$category = $_POST['category'];
// 接收上传的文件数组
$files = $_FILES['files'];

// 你的文件上传逻辑...

// 最后返回标准JSON，注意执行exit避免后续输出
echo json_encode(['success' => '1', 'rtnMsg' => '图片上传成功']);
exit;

额外排查技巧 #

如果还是出现解析错误，可以在error回调里查看jqXHR.responseText的内容——大概率是PHP的报错信息（比如文件上传权限不足、存储路径不存在等），根据返回的具体内容就能快速定位PHP端的问题。

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