Question

我有这个json文件：

[{
"id": "1",
"nome": "Mario",
"cognome": "Rossi",
"CF": "MROS4343242",
"eta": "45",
"sesso": "Uomo",
"indirizzo": "Via Rossi 8",
"luogo": "Milano",
"provincia": "Milano",
"citta": "Milano",
"comune": "Milano"
},
{
"id": "2",
"nome": "jason",
"cognome": "marion",
"CF": "MROS4343242",
"eta": "35",
"sesso": "Uomo",
"indirizzo": "Via Prova 71",
"luogo": "Bologna",
"provincia": "Bologna",
"citta": "Milano",
"comune": "Milano"
}]

我已经完成了一个ajax请求，要在html文件中打印“nome”和“cognome”：

function getData()  {
$.ajax({
    type: 'GET',
    url: 'data/persona1.json',
    dataType: 'json',
    success:showData,
    error: function() {
        // richiesta fallita
        alert("ERRORE!");
    }
});
}

function showData(pdata) {
var container = $('#tableContainer tbody');
container.html(
    '<tr>' +
    '<td>' + pdata.nome + '</td>' +
    '<td>' + pdata.cognome + '</td>' +
    '</tr>' +
);
}

现在，我将在“cognome”旁边建立一个链接/按钮，以显示所有用户的详细信息：

Mario | Rossi | "Button to show Mario Rossi'details"
Jason | Marion | "Button to show Jason Marion'details"

如何打印详细信息？我需要做另一个ajax请求从json文件中再次提取数据？

Answer 1

您可以将上述内容合并为一个，以便您可以将ajax调用中的数据转换为成功回调函数：

function getData() {
  $.ajax({
    type: 'GET',
    url: 'data/persona1.json',
    dataType: 'json',
    success: function(pdata) {
      var container = $('#tableContainer tbody');
      container.html(
        '<tr>' +
        '<td>' + pdata.nome + '</td>' +
        '<td>' + pdata.cognome + '</td>' +
        '</tr>' +
      );
    },
    error: function() {
      // richiesta fallita
      alert("ERROR!");
    },
  });
}

你可以在你想要隐藏的任何内容上设置display：none，然后使用按钮来显示它，如下所示：

'<td style="display:none" class="mydata' + pdata.Id + '">' + pdata.nome + '</td>'

使用所有项目上的ID将允许您创建一个按钮，该按钮定位所有与类ID相同的项目：

'<td><input type="button" class="mydata' + pdata.Id + '" onclick="showItems(' + pdata.Id + ')" value="show details">'

然后有一个显示所有细节的函数：

function showItems(itemId) {
    $('.mydata'+itemId).show();
}

从json文件（jquery / ajax）打印所有用户的详细信息

1 个答案: