从 XMLHttpRequest 访问响应 JSON 数组答案

【问题标题】：Access response JSON array from XMLHttpRequest从 XMLHttpRequest 访问响应 JSON 数组
【发布时间】：2018-04-10 13:27:21
【问题描述】：

我有问题。我通过 AJAX (XMLHttpRequest) 发送文件。无论如何。 PHP 函数返回一个编码为 JSON 的响应数组。我可以在 JavaScript 中捕获数组，但我无法访问数组中的指定键。

这里是这个数组的控制台日志：

{"data":"cos","data1":"cos1"}

我有我的 JavaScript 文件：

$('input[name=zdjecie]').on("change",function() {
    var inputfile = document.querySelector('#file');
    var file = inputfile.files[0];

    $('button[type=submit]').addClass('disabled');

    var formData = new FormData();
    var request = new XMLHttpRequest();

    request.upload.addEventListener('progress', function(e){
        var pro = Math.round(e.loaded/e.total * 100);
        if(pro == 100) {
            $('#upload_progress').css({'width':pro+'%', background:'#00A65A'});        
            $('button[type=submit]').removeClass('disabled');                
        }
        else {
            $('#upload_progress').css({'width':pro+'%', background:'#3C8DBC'});   
        }
    }, false);        

    formData.append('file', file);
    request.open('post', '/admin/ajax/upload-admin-photo');
    request.send(formData);
    request.onloadend = function() {
        var result = request.response;                
        console.log(result.data);
    };
});

现在是在 POST 请求之后执行的 PHP 函数：

/**
 * @Route("/admin/ajax/upload-admin-photo")
 */
public function ajaxUploadAdminPhotoAction(Request $request)
{ 
    $data = $_FILES;

    $response = array("data" => 'cos', 'data1' => 'cos1');
    return new Response(json_encode($response)); 
}

变量result:{"data":"cos","data1":"cos1"}的控制台日志

变量result.data的控制台日志：undefined

我真的需要一些帮助。我什么都试过了！ :(

【问题讨论】：

您需要先将字符串 '{"data":"cos","data1":"cos1"}' 解析（=解码）为 json：var result = JSON.parse(request.response);
是的！而已。发布答案，我会接受！
相关：stackoverflow.com/questions/45015/…

标签： javascript php arrays ajax xmlhttprequest

【解决方案1】：

您需要先将字符串 '{"data":"cos","data1":"cos1"}' 解析（=解码）为 json：

var result = JSON.parse(request.response);
// now you can access it's params:
console.log(result.data);

请参阅the manual 了解更多信息。

【讨论】：