使用json文件从服务器检索json对象并在表中显示数据

时间:2012-03-23 11:05:24

标签: jquery json

我对使用jQuery进行编程非常陌生,我正在尝试从本地具有的json文件中检索JSON对象,并在网页中的表中显示数据。我已经查看了几个不同的论坛,但到目前为止我的所有代码都在firebug中出错。

我得到的最接近的是一小段代码返回任何内容:

var vendor;

$.ajax({  
        async: true,  
        type: "POST",  
        url: "dataRetrieval.json",  
        data: "vendorId="+vendor,  
        success: function(json){    
               alert( "Data retrieved: " + json );   
        }  
    }); 

当我跑步时,我在警报中显示以下内容: 检索到的数据:[object XMLDocument]

我显然在这里遗漏了一些东西,如果有人能够帮助我,我会非常感激。

2 个答案:

答案 0 :(得分:1)

只需添加一个dataType:'json'就可以了:

$.ajax({
    async: true,
    type: "POST",
    url: "dataRetrieval.json",
    data: "vendorId="+vendor,
    dataType: 'json',
    success: function(json){
        alert( "Data retrieved: " + json );
    }
});

同时查看$.getJSON()。另外,您可以考虑将data属性作为字典传递:data: {vendorId: vendor},它更灵活,在处理用户输入时不会让您遇到编码问题(例如,如果用户输入“Jack”) & Jill“进入一个名称字段,它将正确地逃脱该标记。”

答案 1 :(得分:0)

验证您的JSON是否有效 - > http://www.jsonlint.com 我猜你的JSON有多个数据。

HTML

<table id="table"></table>

的jQuery

$.getJSON("dataRetrieval.json",function(data){
   $.each(data,function(index, d){
       //append data to your table as rows
       $('#table').append(
           '<tr>' +
               '<td>' + d.row1entry1
               '<\/td>' +
               ........
           '<\/tr>'
       );          
   });
});