解析并呈现json数据

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("抱歉!加载列表失败,请稍后重试!");    
            }
        });
    });

 

 

当中遇到一个小问题:Origin null is not allowed by Access-Control-Allow-Origin.

js文件中使用load()方法,而Chrome浏览器出于安全起见,不允许load本地文件

解决方法:http://www.windguo.com/javascript/261.html 或者直接只用IE8

 

 

解析并呈现json数据,布布扣,bubuko.com

解析并呈现json数据

上一篇:js“分享到”侧边框伸缩实现


下一篇:WdatePicker.js的使用方法