Question

我有这个JSON文件：

[{
    "id": "1",
    "name": "Mario",
    "cognome": "Rossi",
    "CF": "MROS4343242",
    "eta": "45",
    "sesso": "Uomo",
},{
    "id": "2",
    "name": "Simon",
    "cognome": "Jason",
    "CF": "JSOS4343242",
    "eta": "30",
    "sesso": "Uomo",
}]

我做了一个ajax打电话来打印一张只有＆＃34;名字＆＃34;和＆＃34; cognome＆＃34;，然后我会建立一个按钮来显示每个用户的全部细节。这就是我现在看到的：

Mario | Rossi | "Button to see Mario'details"
Simon | Jason | "Button to see Simon'details"

但我怎么能用jquery / ajax做到这一点？

这是现在的代码：

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.append(
    '<tr>' +
    '<td>' + pdata.nome + '</td>' +
    '<td>' + pdata.cognome + '</td>' +
    '<td><a href="#modalContainer" rel="modal:open" onclick="getDetails()">Details</a></td></tr>' +
    '</tr>'
);

}

Answer 1

您可以将每个用户的所有数据存储在隐藏的变量中，一旦您单击该按钮，您就可以为该用户加载数据。您不需要ajax调用，它没有意义，因为您没有需要去服务器加载或威胁数据。

如果您需要在服务器上加载的信息多于您在json文件上的信息，则会有所不同。然后，您只需将该数据存储在服务器上以及页面上。

你的问题对我来说不太清楚。

Answer 2

我建议你为person对象创建一个构造函数，并将每个人作为变量存储在表中。然后，您可以根据自己的喜好使用每个人的信息，但绝对不需要另一个ajax电话。我建议的一个小例子：jsfiddle

$(document).ready(function(){

    var JSONTable = [{
        "id": "1",
        "name": "Mario",
        "cognome": "Rossi",
        "CF": "MROS4343242",
        "eta": "45",
        "sesso": "Uomo",
    },{
        "id": "2",
        "name": "Simon",
        "cognome": "Jason",
        "CF": "JSOS4343242",
        "eta": "30",
        "sesso": "Uomo",
    }];

    function personData(id,name,cognome,CF,eta,sesso){
      this.id = id;
      this.name = name;
      this.cognome = cognome;
      this.CF = CF;
      this.eta = eta;
      this.sesso = sesso;
    }

    function parseData(json){
      var parsedTable = new Array();

      for (var i=0; i<json.length;i++){
        parsedTable[i] = new personData(json[i].id, json[i].name, json[i].cognome,json[i].CF,json[i].eta, json[i].sesso);  
        }
        for (var i=0; i<parsedTable.length;i++){
            console.log(parsedTable[i]);
        var htmlCode = '<tr><td>' + parsedTable[i].name +       '</td><td>' + parsedTable[i].cognome + '</td><td><button id="clickInfo' + i + '" >Click me</button></td></tr>'
        var moreInfo = "CF:" + parsedTable[i].CF + " Eta:" + parsedTable[i].eta + " Sesso:" + parsedTable[i].sesso;

        $(htmlCode).appendTo("#personInfo");

        $("#clickInfo"+i).on('click',function(){
        alert(moreInfo);
        });
        }

    }

    parseData(JSONTable);

    });`

对于设计很抱歉，它只是让您对如何使用已存储的变量有所了解。

如何在ajax调用后只显示json文件中的元素

2 个答案: