步骤：获得JSON文件——解析——调用

先说一下JSON的格式，可以对其分为三类：json格式的文件和txt格式的文件，JavaScript对象。

json是有特殊格式的文本，以{}为最外层。形式与JavaScript对象字面量一样，但不能直接引用，还要转化为JavaScript对象后才能引用。 
JavaScript对象是一个实实在在的可以拿来调用的对象。 
txt是纯文本，没有任何格式要求可以直接在HTML中使用,且是以[]为最外层。

JSON对象：

[{“AreaId”:”123”},{“AreaId”:”345”}] //未命名，数组名字等于$.ajax中的success:function的参数 或 {“Area”：[{“AreaId”:”123”},{“AreaId”:”345”}]} //这表示一个Area对象，他有两个子数据，每个子数据也是一个对象，每个子对象都是AreaId。

JSON字符串：

Var strJSON = “{“Area”：[{“AreaId”:”123”},{“AreaId”:”345”}]}”， 或 Var strJSON = ‘{“Area”：[{“AreaId”:”123”},{“AreaId”:”345”}]}’，

在script中：

var txt = {"name":"laowang","phone":"123123"}

可以直接innerHTML= txt.name放入 
这是因为这里是JavaScript对象，可以直接引用。 
如果改成：

var txt =" {"name":"laowang","phone":"123123"} "

这则是一个JavaScript字符串。还要用eval()、 JSON.parse()之类的转为JavaScript对象才能引用。

json可以直接alert弹出所有的信息，JavaScript对象不行

服务器返回的是JSON字符，GetJSON之后转为对象

一、获得JSON文件： 
1、 jQuery $.ajax();

如何调用其responseText，这是JSON字符串:

var htmlobj; htmlobj = $.ajax(); $.("#div").html(htmlobj.responseText)*

2、普通的JavaScript生成。获得JSON字符串（根据url的不同而不同吗？）

var xml function create() { if(window.AcitiveXObject) { xml = new ActiveXObject(); } if(window.XMLHttpRequest) { xml = new XMLHttpRequest(); } } function operation() { create(); xml.open("GET""json.json",true) xml.send(null) }

3、有时会见到直接在script内生成的JavaScript对象：

<script> var xml = "{----------------}" </script>

二、解析 
解析就是使用JSONparse()、 eval()来把JSON字符串改为JavaScript对象。而有些方法获得的JSON数据已经是JavaScript对象，则可跳过这一步。已在上方标出。

eval(),JSONparse()要对var a = '{----------}'这一类使用。因为加'说明是字符串，不加'说明是对象，这两者都是把字符串转为对象的方法，但eval()会执行字符串中的所有代码，而JSONparse()只会执行JSON格式的代码，且JSONparse()的执行速度更快。

eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript 对象。必须把文本包围在括号中，这样才能避免语法错误：var obj = eval ("(" + txt + ")");

还有一种用fucntion来解析的方法，它的典型应用就是在JQUERY中的AJAX方法下的success等对于返回数据data的解析

var json='{"name":"CJ","age":18}'; data =(new Function("","return "+json))();

此时的data就是一个会解析成一个 对象了. 
例如：

var arr = {"red":{"id":1,"name":"mary"},"blue":{"id":2,"name":"u71d5u5b50"}}; $.each(arr,function(idx,item){ //输出 alert(item.id+"哈哈"+item.name); })

还有：

$.ajax({ type: "post", url: "Default.aspx", dataType: "json", success: function (data) { $("input#showTime").val(data[0].demoData); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(errorThrown); } });

三、调用： 
由于不能直接调用JavaScript对象，我们需要数据中数组里最内层的属性/值。 
1、 for 也可以用来遍历json字符串 
2、 each 是遍历JQuery对象

$(function(){ $('#send').click(function(){ $.ajax({ type: "GET",//用逗号结尾 url: "test.json", data: {username:$("#username").val(), content:$("#content").val()}, dataType: "json", error: function (XMLHttpRequest, textStatus, errorThrown) { alert(errorThrown); } , success: function(data){//与下面each的第一个参数相同即可 $('#resText').empty(); //清空resText里面的所有内容 var html = ''; $.each(data, function(commentIndex, comment){ //each的第一个参数是一个数组或者对象(与success:function的参数相同)，第2个参数是一个回调函数。function第1个参数为对象的成员或数组的索引，第2个参数为对应变量或内容(即数据中数组名，与下面相同)。 html += '<div><h6>' + comment['username'] + ':</h6><p' + comment['content'] + '</p></div>'; });//分成多段，增加可读性 $('#resText').html(html); } }); }); });

同时又有append()和var str = "html页面代码"，再用.html(str)把代码输入 这两种方法。

附：.each()和().each()的差别

$(items).each(function(){ //item }) $.each(items,function(i,item){ //write your code })

$.each()函数不同于JQuery对象的each()方法，它是一个全局函数，不操作JQuery对象，而是以一个数组或者对象作为第1个参数，以一个回调函数作为第2个参数。回调函数拥有两个参数：第1个为对象的成员或数组的索引，第2个为对应变量或内容。