Question

function callLink(imageId) {
        $.getJSON('/GetData/GetImage?idImage=' + imageId, function (data) {
            console.log(data);
        });
    }

我在上面的代码中运行时的JSON结果是

[
   {
      FileName:"10012816.jpeg"      ID:2591      TicketID:"10012816"
   },
   {
      FileName:"1562754508233.jpeg"      ID:2591      TicketID:"10012816"
   }
]

如何从上面的JSON获取结果并将其放入html代码。像这样

    @foreach (var item in data) {
//html code
<h6 class="mb-3">@item.FileName</h6>
...
<span class="badge badge-success r-30"><i class="icon-check mr-2"></i>@item.ID</span>

    }

Answer 1

您已经提供了伪代码，

function callLink(imageId) {
    // as you are using `.getJSON` it's already formatted and you don't need `JSON.parse()`
    $.getJSON('/GetData/GetImage?idImage=' + imageId, function (data) {
        let output = '';
        for(let i = 0; i < data.length; i++) {
            output += `<h6 class="mb-3">${data[i].fileName}</h6>`;
            output + = `..`;
            output + = `<span class="badge badge-success r-30"><i class="icon-check mr-2"></i>${data[i].ID}</span>`
        }
        // or some more useful code, like $(selector).html(output);
        alert(output);
    });
}

Answer 2

创建一些html div

<div id="images-info"></div>

将请求的数据追加到div

function callLink(imageId) {
    $.getJSON('/GetData/GetImage?idImage=' + imageId, function (data) {
        for (var i = 0; i < data.length; i++) {
            $('#images-info').append('<div><h6 class="mb-3">'+ data[i].FileName +'</h6><span class="badge badge-success r-30"><i class="icon-check mr-2"></i>'+ data[i].ID +'</span></div>');
        }
    });
}

从JSON获取价值并转化为HTML

2 个答案: