2016-10-10 43 views
0

我有这个JSON文件后,从JSON文件中的元素:如何只显示AJAX调用

[{ 
    "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调用打印一张小桌子只有“名”和“cognome”,然后我将建立一个按钮,显示的每一个细节全部user..so这是我现在看到:

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>' 
); 

}

+0

我很困惑 - 你说你正在做一个AJAX请求,然后问你如何用AJAX做。目前还不清楚你在问什么。另外,你目前的代码是什么? –

+0

我做了一个打印“名称”和“cognome”的ajax请求,那我怎么做才能显示每个用户的详细信息?我不知道如果我需要做另一个Ajax请求,或者如果我能以另一种方式做到这一点.. – razer90

+0

如果你有第一个需要的信息,你不应该需要另一个AJAX请求。你可以编辑你的问题,包括你到目前为止的代码 –

回答

0

你可以为每个用户的所有数据存储在隐藏瓦尔,一旦你按一下按钮,你可以加载数据用户。你不需要ajax调用,它没有意义,因为你不需要去服务器加载或威胁数据。

如果您需要在服务器上加载比您在json文件上更多的信息,情况会有所不同。然后,您只需要将该数据存储在服务器上,然后放在页面上即可。

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

0

我建议你为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); 

    });` 

很抱歉的设计,它只是给你的,你可以如何利用你已经存储变量的一个小想法。