ajax请求后未定义的Javascript对象属性

Question

我进行了一个 ajax 调用，它从 .Net JsonConvert.SerializeObject() 调用返回了一个 json 字符串，该 json 会在浏览器中自动解析为一个对象，但我目前无法访问没有“未定义”的属性" 被退回。

我当前返回的 json 字符串是（删除了大部分字节数组）：

"[{\"filename\":\"\",\"size\":6,\"csize\":\"       5.85 KB\",\"extfile\":\"/9j/4AAQSkZJRgABAQEASABIAAD/2wBDA....AAAAAAAAAAAf//Z\"}]"

我已经验证过了，一切都很好。

我的 javascript 是：

function GetItemImage() {
    let kditem = $("#txtItem").text();
    let url = GetUrl();

    $.ajax({
        url: url,
        type: "POST",
        data: JSON.stringify({
            "kditem": kditem
        }),
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            if (data != null) {
                $("#ImgItem").attr("src", "data:image/png;base64,'" + data.extfile + "'");
            }
        }
    });
}

我已经确定它绝对是一个对象。我尝试以 data.extfile、data["extfile"] 的形式访问，将 extfile 作为字节数组传入，然后访问它，但它总是以“未定义”的形式出现。在绝望中，我什至尝试访问索引、遍历对象等，但仍然一无所获。

我感觉 json 字符串中存在一个问题，导致它无法正确转换，但我看不到它，因为我对 json 工作不多。有人能指出我哪里出错了吗？

解决方案

Javascript 将响应解析为具有单个属性“data.d”的对象，解析了 data.d 并正确创建了该对象。

function GetItemImage() {
    let kditem = $("#txtItem").text();
    let url = GetUrl();

    $.ajax({
        url: url,
        type: "POST",
        data: JSON.stringify({
            "kditem": kditem
        }),
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            if (data != null && data.d != null) {
                let imgData = JSON.parse(data.d);
                $("#ImgItem").attr("src", "data:image/png;base64," + imgData[0].extfile);
            }
        }
    });
}

Answer 1

基本上如果您粘贴的string 是响应（数据），当使用JSON.parse() 时它会转换为一个数组，所以您应该这样使用它。

const stringResponse = "[{\"filename\":\"\",\"size\":6,\"csize\":\"       5.85 KB\",\"extfile\":\"/9j/4AAQSkZJRgABAQEASABIAAD/2wBDA....AAAAAAAAAAAf//Z\"}]"


const parsedResponse = JSON.parse(stringResponse);

console.log(parsedResponse)

const entry = parsedResponse[0];

console.log(entry.extfile)

所以基本上，你需要这样做：

data[0].extfile

由于 console.log(data) 语句返回：

{d: "[{"filename":"","size":6,"csize":" 5.85 KB",…AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAf//Z"}]"} 

您实际尝试获取的数据包含在接收数据的 d 属性中包含的 JSON 字符串中。如果您要解析字符串然后访问 extfile 属性，您将获得数据：

var actualData= JSON.parse(data.d);

var extfile = actualData[0].extfile;

Answer 2

不知道这是否会有所帮助，但这里是：

弃用通知：jqXHR.success()、jqXHR.error() 和 jqXHR.complete() 回调从 jQuery 3.0 开始被删除。您可以改用 jqXHR.done()、jqXHR.fail() 和 jqXHR.always()。

http://api.jquery.com/jquery.ajax/

数据也是一个数组，可能会抓取数组data[0].extfile中的第一个对象。

我认为它可能会被重新设计：

function GetItemImage() {
    let kditem = $("#txtItem").text();
    let url = GetUrl();

    $.ajax({
        url: url,
        type: "POST",
        data: JSON.stringify({
            "kditem": kditem
        }),
        dataType: "json",
        contentType: "application/json; charset=utf-8"
    }).done(function(data){
        if (data != null) {
            $("#ImgItem").attr("src", "data:image/png;base64,'" + 
            data[0].extfile + "'");
        }
    });
}