解析并呈现json数据

浏览数：24 / 时间：2015年06月09日

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。

JSONM文件中包含了关于“名称”和“值”的信息。

有时候我们需要读取JSON格式的数据文件，在jQuery中可以使用Ajax或者 $.getJSON()方法实现。

jQuery ajax - getJSON() 方法

语法：

jQuery.getJSON(url,data,success(data,status,xhr))

等价于：

$.ajax({
  url: url,
  data: data,
  success: callback,
  dataType: json
});

一，jQuery.Ajax

json数据是一种经型的实时数据交互的数据存储方法，使用到最多的应该是ajax与json配合。

下面我总结jquery处理json数据方法。

1）$.each(...)

$(‘#button1‘).click(function(){
        $.ajax({
            type:"GET",
            url:"data.txt",
            dataType:"json",
            success:function(data){

                var string="<ul>";
                //i表示在data中的索引位置，n表示包含的信息的对象
                $.each(data,function(i,n){
                    //获取对象中属性为optionsValue的值                
                    string+="<li>"+n["optionValue"]+"</li>";
                });
                string+="</ul>";
                $(‘#result‘).append(string);
            }
        });
        return false;
    });

2）eval( data)

这种处理的方式将传递过来的数据直接解析为json数据，也就是说这里的前台js代码可能直接把这些数据解析成json对象数据，而并非字符串数据，如data[0].demoData，这里就直接使用了这个json对象数据：

$(‘#button2‘).click(function(){
        $.ajax({
            type:"GET",
            url:"data.txt",
            dataType:"json",
            success:function(data){
                
                var myObject = eval( data);
                var string = ‘<table border = "1">‘;
                string += "<caption align=‘top‘>使用eval()解析数据</caption>";

                string += "<tr><td>"+"optionKey"+"</td>";
                string += "<td>"+"optionValue"+"</td></tr>";

                for(var i = 0; i<myObject.length;i++){     
                        string += "<tr><td>"+myObject[i].optionKey+"</td>";
                        string += "<td>"+myObject[i].optionValue+"</td></tr>";
                }
                string += ‘</table>‘
                $(‘#result‘).empty().append(string);
            },
            error : function() {
                alert("抱歉！加载列表失败，请稍后重试！");    
            }
        });
    });