首页 > 代码库 > 解析并呈现json数据

解析并呈现json数据

2024-07-11 05:20:30   227人阅读

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

 

 


联系
我们